向動態創建的對象添加滑塊功能

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)克隆該元素，該元素還將克隆事件處理程序和與該元素相關聯的數據。