向动态创建的对象添加滑块功能

Question

我在每次用户按下按钮时都使用.clone（）方法创建了嵌套元素集合的副本。

但是，在每组元素中，我需要一个将附加到幻灯片功能的滑块，但应该只更改该特定集合中项目的值。

如何为每个创建的集合创建滑块的新实例。

下面的代码适用于ID为“value-slider”的硬编码滑块，但我需要下面的代码来处理克隆滑块的每个实例。

感谢您的帮助

$(function() { 
    $("#value-slider").slider({ 
     orientation: "horizontal",    
     value:100, 
     min: 0, 
     max: 1000, 
     step: 50, 
     slide: function(event, ui) { 
      alert($(this).attr("id")); 
      $(".amount").val("£" + ui.value + " - £" + (ui.value + 100)); 
      $(".price").text("£" + (ui.value/19).toFixed(2) ); 
      $(".i-price").text("£" + (ui.value/19).toFixed(2) ); 
     } 
    }); 
    $(".amount").val("£" + $(".value-slider").slider("value") + " - £" + ($(".value-slider").slider("value") + 100)); 
}); 

元素的标记将被克隆低于（注意幻灯片如何只是一个克隆元素的后代：

<div id="template" class="basket-item group hide" style="display:none;"> 
    <div class="basket-item-icon"><img /></div> 
    <div class="basket-item-details"> </div> 
    <div class="basket-item-slider"> 
    <div style="width:20px; font-weight:bold; float:left;color:#F6931F; ">£0</div> 
    <div class="value-slider" style="width:140px; float:left; margin-right:10px;"></div> 
    <div style="width:30px; font-weight:bold; float:left;color:#F6931F; ">£1000</div> 
    </div> 
    <div class="basket-item-value">Value: 
    <input type="text" class="amount" style="margin:2px 0; color:#f6931f; font-weight:bold; width:90px;" /> 
    </div> 
    <div class="basket-item-cover-price">Our Price:<br /> 
    <span class="i-price" style="font-size:24px; color:#F6931F;">£x.xx</span> </div> 
</div> 

Answer 1

我d创建接受元素并附加滑块的功能：

function addSlider(element) { 
    var slider = $('.value-slider', element).slider({ 
     orientation: "horizontal",    
     value:100, 
     min: 0, 
     max: 1000, 
     step: 50, 
     slide: function(event, ui) { 
      $(".amount", element).val("£" + ui.value + " - £" + (ui.value + 100)); 
      var price = "£" + (ui.value/19).toFixed(2); 
      $(".price", element).text(price); 
      $(".i-price", element).text(price); 
     } 
    }); 
    $(".amount", element).val("£" + slider.slider("value") + " - £" + (slider.slider("value") + 100)); 
} 

（假设.amount,.price等是您添加滑块的元素的后代。你可能需要调整它。这是不可能提供一个完全正确的解决方案，而无需知道HTML结构）

然后，当你克隆的元素，你只需通过克隆功能：

var clone = $('some selector').clone(); 
addSlider(clone.get(0)); 

---

另外，您可以尝试使用clone(true)克隆该元素，该元素还将克隆事件处理程序和与该元素相关联的数据。