Question

我基本上从这里http://jqueryui.com/slider/#steps抓取了大部分代码，我想知道当我点击“添加”按钮时我将如何添加新的滑块。

<script>

$(function () {
$( "#slider" ).slider({
  value:100,
  min: 0,
  max: 500,
  step: 50,
  slide: function( event, ui ) {
    $( "#amount" ).val( "$" + ui.value );
  }
});
    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});

$(document).on('click', '.addNew', function() {
    var newSlider = $('#slider').html();
    $('#slider').append(newSlider);
});

</script>

<p>
  <button class="addNew">Add</button>   
  <label for="amount">Donation amount ($50 increments):</label>
  <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>

<div id="slider"></div>

如果有人能提供帮助，那就太好了，谢谢。

Answer 1

目前还不清楚你想用新的滑块做什么，但是你的代码存在一些问题。首先，你要在第一个滑块div中添加第二个滑块div（而不是在下面），第二个是你用与第一个滑块相同的ID添加它 - 你几乎肯定想要有不同的ID。最后，您需要初始化新元素上的滑块。

所以，这样的事情（替换你的$(document).on(...) { ... }）。

// Global variable to count make the ids different (could embed this on some object)
slider_count = 1; 

$(document).on('click', '.addNew', function() {
    // Work out the id for the new slider
    var new_slider_id = 'slider'+slider_count;
    // Attach it to the end of the body -- you might want a 'container' DIV here
    $('body').append("<div id='"+new_slider_id+"'></div>");
    // Initialize the new slider
    $( "#"+new_slider_id ).slider();
    // Update our unique id count
    slider_count = slider_count + 1;
});

您还需要做一些事情来处理这些值 - 将它们添加到一起，或者具有单独的总计。你可以给所有滑块DIV一个类，然后使用each来查看值。或者，由于您可以访问slider_count变量，因此可以计算出滑块的数量及其ID。

希望有所帮助。

编辑：根据我的想法添加以下内容，我会尝试解释发生了什么。

首先，通过不在HTML中嵌入第一个滑块来简化生活，只需将块放在那里，稍后将保留滑块：

<p>
  <button class="addNew">Add</button>   
  <label for="amount">Donation amount ($50 increments):</label>
  <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="container">

现在你需要一种创建滑块的方法，因为它是为响应多个事件（页面加载和按钮点击）而调用的，所以将它作为一个函数是有意义的。

function createSlider() {

    // Work out the id for the new slider
    var new_slider_id = 'slider'+createSlider.counter;

    // Create a slider with that id and a common slider class in the container
    $('#container').append("<div class='amount_slider' id='"+new_slider_id+"'></div>");

    // Initialize the new slider 
    $( "#"+new_slider_id ).slider({
      value:100,
      min: 0,
      max: 500,
      step: 50,
      change: function() { 
          updateAmount();
      }
    });

    // Update the amount now to take account of the new default value
    updateAmount();

    // Update our unique id count
    createSlider.counter = createSlider.counter + 1;
}

调用此方法时，它会在DIV容器中创建一个新滑块，并使用您使用的相同选项对其进行初始化。它使用计数器为每个滑块提供不同的ID（从零开始）。当计数器有效地保持静态时，计数器将作为变量存储在函数中（您可以在JavaScript中执行）。全局变量也可以工作但这至少表明计数器仅由该函数使用。

该函数在更改滑块时和创建滑块后立即调用updateAmount()。第二次调用是必要的，因为我们在$ 100上启动一个滑块，以便在创建滑块时将需要添加到金额。更新事件发生在change之后，您使用slide会触发任何移动，因此反映的数量通常是错误的。如果其他东西改变了基础价值 - 即另一个脚本，那么改变也会有效。

updateAmount()函数使用了我们为所有滑块提供相同类的事实，因此我们可以使用jQuery的类匹配和each函数来完成所有这些操作，如下所示：

function updateAmount() { 
    var new_amount = 0;
    $('.amount_slider').each(function() {
        new_amount = new_amount += $(this).slider('value');
    });
    $( "#amount" ).val( "$" + new_amount );
}

正如我之前所说，既然您知道计数器的当前值，您也可以手动计算出滑块ID列表并使用它。

最后通过在页面加载时创建第一个滑块将所有内容放在一起（记住将计数器归零，这在JavaScript中并非绝对必要，但通常是一个好习惯）并将创建操作附加到添加按钮：

// Create the first slider
$(document).ready(function() {
    createSlider.counter = 0;
    createSlider();
});

// Attach the createSlider() action to the 'add' button
$(document).on('click', '.addNew', function() {
    createSlider();
});

就是这样 - 如果那不是你想要做的，希望你可以看到逻辑如何工作并改变它以使其按你想要的方式工作。

单击时添加新的滑块字段？

1 个答案: