Question

我正在搞滑块试图让他们做一些事情，但由于某种原因，我遇到了这个错误，而且在我的生活中根本无法解决这个问题。

如果你看下面的代码 - 当我点击一个特定的元素时，它会克隆自己并添加一个滑块。一切正常。

但是当我包含我的自定义功能时，它仍然有效并且功能正常，但滑块的旋钮消失，除了最近添加的滑块。

我也禁用了我的样式表＆amp;其他JS文件，以确保没有冲突。

更新

这是我收到点击后的html输出。

<ul id="mixers">
  <li>
    <div class="align-table">
      <div class="color-img t-align">
        <img>
      </div>
      <div class="t-align">
        <div class="percent-mix ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"></div>
        <div class="mix-value">0</div>
      </div>
    </div>
  </li>
  <li>
    <div class="align-table">
      <div class="color-img t-align">
        <img>
      </div>
      <div class="t-align">
        <div class="percent-mix ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
          <div class="ui-slider-range ui-widget-header ui-slider-range-max" style="width: 0%;"></div>
          <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a>
        </div>
        <div class="mix-value">0</div>
      </div>
    </div>
  </li>
</ul>

正如你所看到的那样整个旋钮都是从html中取出来的。

enter image description here

有什么想法吗？

jQuery(document).ready(function($) {

  function slideumus() {
    var sliders = $("#mixers .percent-mix");
    var availableTotal = 100;

    sliders.each(function() {
      var init_value = 0;

      $(this).siblings('.mix-value').text(init_value);

      $(this).empty().slider({
        value: init_value,
        min: 0,
        max: availableTotal,
        range: "max",
        step: 1,
        animate: 0,
        slide: function(event, ui) {

          // Update display to current value
          $(this).siblings('.mix-value').text(ui.value);

          // Get current total
          var total = 0;

          sliders.not(this).each(function() {
            total += $(this).slider("option", "value");
          });
          total += ui.value;
          var delta = availableTotal - total;

          // Update each slider
          sliders.not(this).each(function() {
            var t = $(this),
              value = t.slider("option", "value");

            var tn = $("#mixers li").length;
            var tntr = (tn - 1);
            var new_value = value + (delta / tntr);

            if (new_value < 0 || ui.value == 100)
              new_value = 0;
            if (new_value > 100)
              new_value = 100;

            t.siblings('.mix-value').text(new_value);
            t.slider('value', new_value);
          });
        }
      });
    });
  }

  function spinit() {
    var imager = function() {
      return $('.color-img img').attr('src');
    }

    $('.place img').attr("src", imager());
  }

  function blendit() {

    var range = $(".percent-mix").slider({
        min: 0,
        max: 100,
        step: 1
      }),
      slideme = $(".percent-mix"),
      places = $(".place");
    slideme.slider('option', 'change', function(e) {

      // set `.place` `div` `html` to empty string
      places.each(function() {
        this.innerHTML = ""
      });
      // `range` value cast to `Number` 100 , or decimal if less than 100
      var r = Number(range.slider("option", "value") === 100 ? range.slider("option", "value") : "0." + range.slider("option", "value"));
      // round `r`
      var p = Math.round(r === 100 ? r : places.length * r);
      if (p !== 100) {
        for (var i = 0; i < p; i++) {
          // `j` : "random" `.place`
          var j = Math.floor(Math.random() * places.length);
          // if `.place` at index `j` `.html().length ==== 0` ,
          // append to `.place` at index `j`
          if (places.eq(j).html().length === 0) {
            places.eq(j).html('<img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">')
          }
          // else , filter `.place` , return `s` `.place` `div` elements
          // having `innerHTML.length === 0`,
          // select "random" index from `s` ,
          // append to `.place` at index `Math.random() * s.length`
          else {
            var s = places.filter(function() {
              return this.innerHTML.length === 0
            });
            s.eq(Math.floor(Math.random() * s.length)).html('<img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">')
          }
        };
      } else {
        places.html(function() {
          return '<img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">'
        })
      }
      spinit()

    });

    range.slider("value", 100).trigger("slide");
    slideme.trigger("change");
    var len = places.filter(function() {
      return this.innerHTML.length > 0
    });
    console.log(len.length); // `49`

  }

  $(function() {
    $(".blend-tile").click(function() {
      var li = $('<li><div class="align-table"><div class="color-img t-align"></div><div class="t-align"><div class="percent-mix"></div><div class="mix-value"></div></div></div></li>');
      $("#mixers").append(li);
      slideumus();
      $('#mixers li:first .percent-mix').bind(blendit());

      $(".tpic", this).clone(true, true).contents().appendTo(li.find('.color-img'));
    });
  });


  //function slideumus() {
  //$('ul.mixers li .t-align .percent-mix').slider({
  //slide: function( event, ui ) {
  //      $( "ul.mixers li .t-align .mix-value" ).html( ui.value );
  //}}).linkedSliders();
  //$('ul.mixers li:first .t-align .percent-mix').slider('value', 100);
  //var val = $('ul.mixers li .t-align .percent-mix').slider("option", "value");
  //}


});

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<li class="blend-tile align num-<?php echo $i++; ?>">
  <div class="tpic">
    <img>
  </div>
</li>

<ul id="mixers">

</ul>

Answer 1

转过来$(this).empty().slider({

带走.empty()解决了问题。

Answer 2

<html>
<head>

  <!-- Load jQuery and jQuery UI -->
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

  <!-- Load the jQuery UI CSS -->
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />


  <!-- jQuery UI Slider code -->
  <script>

  // When the browser is ready...
  $(function() {

    // Create a new jQuery UI Slider element
    // and set some default parameters.
    $( "#slider" ).slider({
      range: "min",
      value: 50,
      min: 0,
      max: 100,
      slide: function( event, ui ) {

        // While sliding, update the value in the #amount div element
        $( "#amount" ).html( ui.value );

      }
    });

    // Set the initial slider amount in the #amount div element
    var value = $( "#slider" ).slider( "value" );
    $( "#amount" ).html( value );

  });

  </script>


</head>
<body>

  <!--  The div that is used as the slider container  -->
  <div id="slider" style="margin-top:100px;"></div>

  <!--  The div that is used to display the slider value  -->
  <div id="amount" style="color:#777;font-size:72px;text-align:center;"></div>

</body>
</html>

这是我从这里得到的代码：http://code.runnable.com/UY1MFCr81yhCAAAH/how-to-use-the-jquery-ui-slider
如果您想查看输出：http://code.runnable.com/VYz2pDPDZ3BlL0AO/output

Jquery UI滑块旋钮消失

更新

2 个答案: