0

我基本上从这里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>

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

4

1 回答 1

0

目前尚不清楚您想对新滑块做什么，但您的代码存在一些问题。首先，您要在第一个滑块 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 美元上启动滑块，因此需要在创建滑块时添加到金额中。更新事件发生在 a 之后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 );
}

正如我之前所说，由于您知道 counter 的当前值，您还可以手动计算出滑块 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();
});

就是这样——如果这不是你想要做的，希望你能看到逻辑是如何工作的，并改变它以使其按你的意愿工作。

于 2013-08-04T07:06:03.963 回答