$(）.hide只在第一次使用时有效

我有一个带有文本阴影生成器的页面。文本阴影代码由3个值组成：

1. 水平偏移
2. 垂直偏移
3. 模糊（可选）
4. 颜色

在我的html中，我有一个带有id代码的div在这里用户可以看到代码！！！它由4个跨度标记组成。类为"blur"的第三个span标记是我的问题在我的html中，我创建了一个名为optimize的按钮。它应该找到".blur"span标签的值，如果是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>