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

我创建了一个接受元素并附加滑块的函数：

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)克隆元素，该元素还将克隆事件处理程序和与元素关联的数据。

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

1 个答案: