点击

Question

我需要从滑块创建复选框，该值将是创建的复选框的编号。每个复选框都会创建一个滑块onclick，滑块也必须打印值才能知道它。

我不知道如何创建第一个滑块，但我找到了一种使用jquery的方法：

$("#slider").slider({
    min: 1,
    max: 100,
    value: 1,
    slide: function( event, ui ) {
        $( "#result" ).html( ui.value );
    }
});

滑块的div是：

<div id="slider" class="slider"></div><br>
Quantity: <span id="result">1</span>

复选框应该在一个组中：

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup" data-type="horizontal">
       <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
       <label for="checkbox-1">1</label>
    </fieldset>
</div>

我将能够使用jquery方法追加创建元素，但我不确定如何执行其余的事件。我需要一些帮助。

谢谢！

Answer 1

完成。

这会创建复选框：

$("#slider").slider({
  min: 1,
  max: 30,
  value: 1,
  slide: function( event, ui ) {
    // Min num
    var start = 1;

    $( "#result" ).html( ui.value );
    // Clear the div
    $('#showChck').html('');

    // Array to create the checkboxes
    $(new Array(ui.value)).each(function () {

      // Add the new checkbox
      $('#showChck').prepend(
        $('<input/>', {type: "checkbox", name: "checkbox-" + start, id: "checkbox-" + start, class: "custom", title: "Cambiar los canales que tendrá la linea: " + start}),
        $('<label/>', {for: 'checkbox-' + start }).text(start)
      );

      // Increase
      start++;
    });
  }
});

这会创建滑块：

$('body').on('click', '#showChck input', function() {
    var x = this.id;
    var $id = x.replace(/\D/g, '');

    if ($("#slider-" + $id).length) {
        $("#slider-" + $id).fadeToggle();
        $("#result-" + $id).fadeToggle();
    }
    else {
        $("#showSldr").append(
            $('<div/>', {id: "slider-" + $id, class: "slider", title: "Estos son los canales que tendrá la linea: " + $id}),
            $('<span/>', {id: 'result-' + $id}).text($id)
        );
        $("#slider-" + $id).slider({
            min: 4,
            max: 100,
            value: 4,
            step: 2,
            slide: function( event, ui ) {
                $( "#result-" + $id ).html( ui.value );
            }
        });
    }
});