javascript - 动态生成的 slider 将不起作用

Question

我有一个盒子阴影生成器。每个值都有 4 个 slider (x 轴、y 轴、模糊、展开)我还通过 javascript 创建了第 5 个 slider (我希望此 slider 启用/禁用插入属性)问题是它不工作:这是我的代码:

$(document).ready(function() {
  $("#code").css({
    "    $( document ).ready(function() {
    $("#code").css({
    "border": "3px solid gold",
    "padding": "4px",
    "color": "lightblue"
  });
  $("#inset").css('width', '10%');

  $(".slider").change(
    function() {
      var x = $("#x").val() + "px ";
      var y = $("#y").val() + "px ";
      var b = $("#blur").val() + "px ";
      var s = $("#spread").val() + "px ";
      var code = x + y + b + s + " dodgerblue ";
      $(".generator").css("box-shadow", code);
      $(".h-shadow").html(x);
      $(".v-shadow").html(y);
      $(".blur").html(b);
      $(".spread").html(s);
    });

  $("#optimize").before(
    "<input type='range' id='inset' value='0' min='0' max='1' >");

  $("#boxSub").click(
    function() {
      $(".slider").val(0);
      $('.Code').html("0");
      $(".blur").html("0");
      $(".spread").html("0");
      $('.generator').css("box-shadow", $("#boxShadowf").val());
    });
  $("#inset").change(
    function() {
      var ins = $("#inset").val();
      if (ins === "1") {
        var code = x + y + b + s + " dodgerblue inset";
        $(".generator").css("box-shadow", code);

      } else {
        var code = x + " " + y + " " + b + " " + s + " dodgerblue";
        $(".generator").css("box-shadow", code);
      }
    });
  $("#toggleCode").click(
    function() {
      $('.code').toggle(789);
    });
  $("#optimize").click(function() {
    /****

        Optimize the code by finding the spread and the blur values
        If any of those to is equal to 0 or 0px then removeit or print an empty string

        	***/
    var b = $(".blur").html();
    var s = $(".spread").html();
    if (b === "0" || b === "0px" && s != "0" || s != "0px") {
      $(".blur").html(b);
    } else {
      if (b === "0" || b === "0px") {
        $(".blur").html("");
      }

      if (s === "0" || s === "0px") {
        $(".spread").html("");
      }
    }
  });

  $("#resetCode").click(function(event) {

    $(".slider").val(0);
    $('.generator').css('box-shadow', '0px 0px 0px 0px');
    $('.Code').html("0");
    $('.v-shadow').html(" 0");
    $('.blur').html("0");

  });
});
border ":"
3 px solid gold ","
padding ":"
4 px ","
color ":"
lightblue "});
$("#inset").css('width', '10%');

$(".slider").change(
  function() {
    var x = $("#x").val() + "px ";
    var y = $("#y").val() + "px ";
    var b = $("#blur").val() + "px ";
    var s = $("#spread").val() + "px ";
    var code = x + y + b + s + " dodgerblue ";
    $(".generator").css("box-shadow", code);
    $(".h-shadow").html(x);
    $(".v-shadow").html(y);
    $(".blur").html(b);
    $(".spread").html(s);
  });
$("#optimize").before(
  "<input type='range' id='inset' value='0' min='0' max='1' >");
$("#boxSub").click(

  function() {
    $(".slider").val(0);
    $('.Code').html("0");
    $(".blur").html("0");
    $(".spread").html("0");
    $('.generator').css("box-shadow", $("#boxShadowf").val());
  });
$("#inset").change(
  function() {
    var ins = $("#inset").val();
    if (ins === "1") {
      var code = x + y + b + s + " dodgerblue inset";
      $(".generator").css("box-shadow", code);

    } else {
      var code = x + " " + y + " " + b + " " + s + " dodgerblue";
      $(".generator").css("box-shadow", code);
    }
  });
$("#toggleCode").click(
  function() {
    $('.code').toggle(789);
  });
$("#optimize").click(function() {
  /****

        Optimize the code by finding the spread and the blur values
        If any of those to is equal to 0 or 0px then removeit or print an empty string

        	***/
  var b = $(".blur").html();
  var s = $(".spread").html();
  if (b === "0" || b === "0px" && s != "0" || s != "0px") {
    $(".blur").html(b);
  } else {
    if (b === "0" || b === "0px") {
      $(".blur").html("");
    }

    if (s === "0" || s === "0px") {
      $(".spread").html("");
    }
  }
});

$("#resetCode").click(function(event) {
  $(".slider").val(0);
  $('.generator').css('box-shadow', '0px 0px 0px 0px');
  $('.Code').html("0");
  $('.v-shadow').html(" 0");
  $('.blur').html("0");
});
});

.generator{
  width:10em;
  height:10em;
  background:red;}

		<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="container">
  <div class="jumbotron landing">
    <h1>Box Shadow Generator v1.0 BETA </h1>

  </div>	
  <h1 class="btn btn-info center-block text-center ">An easy to use box 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">

    <div class="col-md-3">
      <input type="range" class="slider form-control" id="x" step="0.1" min="-100" max="100" value="0">
    </div>
    <div class="col-md-3">
      <input type="range" class="slider form-control" id="y" step="0.1" min="-100" max="100" value="0">
    </div>

    <div class="col-md-3">
      <input type="range" class="slider form-control" id="blur" step="0.1" min="0" max="100" value="0">
    </div>
    <div class="col-md-3">
      <input type="range" class="slider form-control" id="spread" step="0.1" min="0" max="20" value="0" >
    </div>

    <div class="generator"></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" id="code">

    div{
    <p class="text-success bg-info"><span class="standard coded">
      box-shadow:<span class="h-shadow Code">0</span> <span class="v-shadow Code">0</span> <span class="blur">0</span> <span class="spread Code">0</span><span class="color"> black</span></span>
      ;</p>
    <p class="text-success bg-info prefixed"><span class="standard coded">
      -webkit-box-shadow:<span class="h-shadow Code">0</span> <span class="v-shadow Code">0</span> <span class="blur">0</span> <span class="spread Code">0</span><span class="color"> black</span></span>
      ;</p>
    <p class="text-success bg-info prefixed"><span class="standard coded">
      -moz-box-shadow:<span class="h-shadow Code">0</span> <span class="v-shadow Code">0</span> <span class="blur">0</span> <span class="spread Code">0</span><span class="color"> black</span></span>
      ;</p>
    }
    <div class="btn btn-danger btn-block" id="optimize" disabled="true">Optimize code</div>
  </div>

我想要的是当我更改最后一个 slider 以启用/禁用 inset 属性时更新代码并使用 class.generator 将其应用于 div

Answer 1

我已经稍微更改了您的代码，认为它可以正常工作:

$(document).ready(

function(){
$(".Code").html("0px")
    $("#optimize").show();
    $("#boxSub").css("margin-bottom","0.1em");
$("#optimize").before("<h3>inset?</h3><input type='range' value='0' min='0' max='1' class='slider' id='inset'/>");

$(".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 ";
            $r=$("#red").val();
            $g=$("#green").val();
            $b=$("#blue").val();
            $color=" rgb("+$r+","+$g+","+$b+")";
            var code=x+y+b+s+$color;
            if (b != "0px"){$(".blur").show();}
            if (s != "0px"){$(".spread").show();}
            if ($p==="0"){
                code = code;
                $(".inset").hide();
            }
            else{
                code="inset "+code;
                $(".inset").show();
            }
            $(".generator").css("box-shadow",code);
            $(".h-shadow").html(x);
            $(".v-shadow").html(y);
            $(".blur").html(b);
            $(".spread").html(s);
            $(".color").html($color);
    });



$("#resetCode").click(
    function(){
        $(".slider:not(#inset)").val(0);
            $(".generator").css("box-shadow",code);
            $(".Code").html("0px");
            $(".color").html(" rgb(0,0,0)");
    });

    $("#boxShadowf").change(

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

            $('.generator').css("box-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();
            var spread=$(".spread").html();

            if($.trim(spread)==="0px"){
                 if($.trim(spread)==="0px" && $.trim(blur)==="0px"){
                    $(".spread").hide();
                    $(".blur").hide();
                 }
                 else{
                $(".spread").hide();
            }
            }

        });

});

这是一个 jsfiddle:http://jsfiddle.net/ucq3401d/