Question

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

horizontal-offset
垂直偏移
模糊（可选）
颜色

在我的html中，我有一个带有id代码的div 在这里用户可以看到代码！它由4个span标签组成。第三个带有“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>

Answer 1

http://jsfiddle.net/wajeurj1/

我认为用空格足够修剪空白：

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

$（）。隐藏仅适用于第一次

1 个答案: