Создавайте флажки из значений и ползунков при нажатии

Question 1

Мне нужно создать флажки из ползунка, значением будет количество созданных флажков. Каждый флажок создает ползунок при нажатии, и ползунки также должны иметь напечатанное значение, чтобы знать это.

Я не уверен, как создать первый слайдер, но я нашел способ использовать 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 append, но я не совсем уверен, как делать остальные события. Мне нужна помощь.

Благодарность!

javascript jquery

0

Chazy Chaz 21 Май 2015 в 14:16

1

from a slider Вы должны предоставить соответствующую ссылку на этот слайдер плагина и обязательно проверить соответствующий DOC.

–

A. Wolff

21 Май 2015 в 14:19

Похоже на круговую ссылку ... флажки создают ползунки, а ползунки создают флажки. На самом деле не понятно, что вы хотите сделать

–

charlietfl

21 Май 2015 в 14:27

Есть 1 ползунок, он создает флажки, а он создает ползунки. Звучит так плохо? : P Edit: Ну ... на самом деле первый ползунок ничего не создает, это число значения, которое создает флажки.

–

Chazy Chaz

21 Май 2015 в 14:30

Answer

Выполнено.

Это создаст флажки:

$("#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 );
            }
        });
    }
});

0

Chazy Chaz 22 Май 2015 в 05:23

Question 2

Выполнено.

Это создаст флажки:

$("#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 );
            }
        });
    }
});

0

Chazy Chaz 22 Май 2015 в 05:23

Создавайте флажки из значений и ползунков при нажатии

1 ответ

Похожие вопросы

Новые вопросы

javascript