$(). Hide работает только в первый раз

Question

У меня есть страница с текстовым генератором тени. текст-тень код состоит из 3-х значений:

1. горизонтальное смещение
2. вертикального смещения
3. нерезкости (по желанию)
4. цвет

В моей HTML У меня есть DIV с кодом id Здесь пользователь может увидеть код !!! Он состоит из 4 тегов span. Третий тег span с классом «размытие» Является ли моя проблема В моем html я создал кнопку под названием optimize. Предполагается найти значение тега span .blur и, если это 0px, удалить его.

Проблема в том, что когда я загружаю страницу и нажимаю кнопку оптимизации, она работает нормально, но когда я меняю ползунок размытия, даже если я верну его к нулю, он не будет работать снова !!! Любые идеи?

Fiddle

Вот мой код:

$(document).ready(

    function() { 
     $("#optimize").attr("disabled", false); 

     function reset() { 
      $(".slider").val(0); 
      $("#text-shadow").html("All the transformations will be applied here"); 
      $(".Code").html("0px"); 
      $(".color").html(" rgb(0,0,0)"); 
      $("#text-shadow").css("text-shadow", "none"); 
     } 

     $("#text-shadow").css("text-shadow", "3px 3px 0px 1px red"); 
     $(".Code").html("0px"); 



     $(".slider").change(
      function() { 
       $p = $("#inset").val(); 
       var x = $("#x").val() + "px "; 
       var y = $("#y").val() + "px "; 
       var b = $("#blur").val() + "px "; 
       var s = $("#spread").val() + "px "; 
       if (blur === "0px") { 
        $(".blur").hide(); 
       } 
       $r = $("#red").val(); 
       $g = $("#green").val(); 
       $b = $("#blue").val(); 
       $color = " rgb(" + $r + "," + $g + "," + $b + ")"; 
       var code = x + y + b + $color; 
       if (b != "0px") { 
        $(".blur").show(); 
       } 
       if (s != "0px") { 
        $(".spread").show(); 
       } 

       $("#text-shadow").css("text-shadow", code); 
       $(".h-shadow").html(x); 
       $(".v-shadow").html(y); 
       $(".blur").html(b); 

       $(".color").html($color); 
       var blur = $(".blur").html(); 
      }); 



     $("#resetCode").click(
      reset() 
     ); 

     $("#boxSub").click(

      function() { 
       $(".slider").val(0); 
       $('.Code').html("0px"); 
       $(".color").html(" rgb(0,0,0)"); 

       $('#text-shadow').css("text-shadow", $("#boxShadowf").val()); 
      }); 
     $("#toggleCode").click(

      function() { 
       $("#code").toggle(768); 
      }); 
     $("#generators").click(

      function() { 
       alert("You might like to use some other generators such as..\nBorder Radius Generator!!!\nText shadow Generator!!\n\nkounelios13"); 
      }); 
     $("#optimize").click(
      function() { 

       var blur = $(".blur").html(); 
       if (blur === "0px") { 

        $(".blur").hide(); 
       } else { 
        $(".blur").show(); 
       } 
      }); 

    }); 

HTML код:

<div class="container"> 
     <div class="jumbotron landing"> 
      <h1>Text Shadow Generator v1.0 BETA </h1> 
     </div> 
     <h1 class="btn btn-info center-block text-center " id="generators">An easy to use text shadow generator</h1> 
     You can try your own values in the following form: 
     <div class="container"> 
      <input type="text" id="boxShadowf"><div class="btn btn-success" id="boxSub">Get val</div> 
     </div> 
     <div class="row text-center"> 
      <div class="col-md-4"> 
       <span class="h3">X-axis</span> 
       <input type="range" class="slider form-control" id="x" step="0.1" min="-10" max="10" value="0"> 
      </div> 
      <div class="col-md-4"> 
       <span class="h3">Y-axis</span> 
       <input type="range" class="slider form-control" id="y" step="0.1" min="-10" max="10" value="0"> 
      </div> 

      <div class="col-md-4"> 
       <span class="h3">Blur</span> 
       <input type="range" class="slider form-control" id="blur" step="0.1" min="0" max="10" value="0"> 
      </div> 
      <span class="h2 text-info" id="text-shadow" contenteditable>All the transformations will be applied here</span> 
     </div> 
     <div class="row text-center h3"> 
      <div class="col-md-4 text-danger"> 
       Red 
        <input type="range" class="slider rgb" id="red" step="1" min="0" max="255" value="0" style="background: red;"> 
      </div> 
      <div class="col-md-4 text-success"> 
       Green 
        <input type="range" class="slider rgb" id="green" step="1" min="0" max="255" value="0" style="background: green;"> 
      </div> 

      <div class="col-md-4 text-primary"> 
       Blue 
        <input type="range" class="slider rgb" id="blue" step="1" min="0" max="255" value="0" style="background: blue;"> 
      </div> 

     </div> 
     <div class="btn btn-warning" id="toggleCode"> 
      Toggle code 

     </div> 
     <div class="btn btn-danger" id="resetCode">Reset code</div> 
     <h1>Code</h1> 
     <div class="code bg-primary text-info " id="code"> 
      div{ 
      <p class="text-success bg-info"> 
       <span class="standard coded">text-shadow:<span class="h-shadow Code">0px</span> <span class="v-shadow Code">0px</span> <span class="blur Code">0px</span> <span class="color">black</span></span> 
       ; 
      </p> 

      } 
     </div> 

     <div class="btn btn-danger btn-block" id="optimize">Optimize code</div> 
    </div> 
    </div> 

Answer 1

http://jsfiddle.net/wajeurj1/

Я думаю, достаточно обрезать пробелы с:

if($.trim(blur)==="0px"){