Как получить родительский элемент ползунка Bootstrap, который вызывает событие изменения - PullRequest
Новая
       17

Как получить родительский элемент ползунка Bootstrap, который вызывает событие изменения

0 голосов
/ 29 апреля 2018

У меня есть два ползунка Bootstrap, инициализированы и готовы. Я прикрепил к ним событие изменения, но не могу определить, какой ползунок изменяется, поскольку событие изменения дает мне объект, содержащий newValue и oldValue. Мне нужно получить event.target , чтобы найти родителя ползунка, который вызывает событие изменения.

Вот код, который у меня есть:

HTML FIXTURE 

<div class="container-fluid">
  <div class="slider-container">
    <span id="slide-label">Example slider label</span>
    <input class="slide" id="slide_1" type="text" />
  </div>
</div>

<div class="container-fluid">
  <div class="slider-container">
    <span id="slide-label">Example slider label</span>
    <input class="slide" id="slide_2" type="text" />
  </div>
</div>

JS 

let slide_arr = [
            {
                id: 'slide_1',
                min: 1,
                max: 4,
                step: 1,
                value: 1,
                tooltip: "hide",
                ticks: [1, 2, 3, 4],
                ticks_labels: ["item a", "item b", "item c", "item d"]
            },
            {
                id: 'slide_2',
                min: 1,
                max: 4,
                step: 1,
                value: 1,
                tooltip: "hide",
                ticks: [1, 2, 3, 4],
                ticks_labels: ["item 1", "item 2", "item 3", "item 4"]
            }];

        let slider_instance = [];

        for (let index = 0; index < slide_arr.length; index++) {
            const slide_obj = slide_arr[index];
            slider_instance[index] = new Slider(`#${slide_obj.id}`, slide_obj);
        }

        for (let index = 0; index < slider_instance.length; index++) {
            const slider = slider_instance[index];
            slider.on('slideStart', function (e) {
                console.log('slideStart')
                console.log(e);
            });
            slider.on('slideStop', function (e) {
                console.log('slideStop')
                console.log(e);
            });
            slider.on('change', function (e) {
                console.log('change')
                console.log(e);
            });
            slider.on('slide', function (e) {
                console.log('slide')
                console.log(e);
            });
        }

Я перепробовал много событий, и никто не помогает.

Я сделал эту скрипку , чтобы продемонстрировать проблему.

1 Ответ

0 голосов
/ 29 апреля 2018

Чтобы получить цель, которую вы меняете, вы можете использовать slider.$element и slider.$sliderElem в вашем случае. 

slider.on('change', function(e) {
    // I think this is what you actually want (#slide_1 or #slide_2)
    console.log(slider.$element)

    console.log(slider.$sliderElem) // This is the horizontal slider
});

Вот вам jsfiddle

...