jquery ui.slider: добавить событие клика для отображения / скрытия дескриптора

Question

Я совершенно новичок в javascript и jquery. Мои знания по программированию ... отсутствуют, я только начал несколько дней назад с некоторых простых задач, таких как замена класса css или переключение div. Поэтому я хочу извиниться, если я наступил кому-то на ноги, задавая здесь вопросы новичка. Но я надеюсь, что кто-то может помочь мне и решить мою проблему.

Мне нужно реализовать какую-то визуальную аналоговую шкалу для опроса; ui.slider идеально подходит для этого. Но мне нужно, чтобы ручка была скрыта по умолчанию. Когда пользователь нажимает на ползунок, ручка должна появиться в правильном положении. Это должно быть довольно просто - по крайней мере, я на это надеюсь - просто скрыв дескриптор css и изменив его с помощью события click на слайдере.

Я использую следующий фрагмент кода, чтобы обернуть обычный div (в моем понимании div необходим для применения jquery slider.js) к моим элементам ввода (они должны быть - по крайней мере визуально - заменены ползунком) и передать значение ползунка входным элементам (необходимо для передачи значений в форму). это работает правильно. (Я делаю это вместо того, чтобы просто поместить div в DOM по умолчанию, потому что я не могу влиять на некоторые php-скрипты, которые будут генерировать элементы формы опроса и т. Д.)

$(function() {
$.each($('.slider'),
function() {
    obj = $(this);
    obj.wrap('<div></div>');
    obj.parent().slider({
        change: function(event, ui) {
            $('input', this).val(ui.value);
        }
    });
});
});

Скрытие ручки-слайдера может быть выполнено с помощью CSS, как описано выше, изменив свойства стиля a.ui-slider-handle. но когда я добавляю обычное событие щелчка к ползунку (.ui-slider), который изменяет свойства дескриптора css, ничего не происходит. Насколько мне известно, это должно быть связано с тем, что событие click не работает с сгенерированными элементами DOM. Я прав с этим? И если да: как я могу решить эту проблему? Может ли кто-нибудь предоставить мне кусок кода для моей функции и объяснить его, чтобы я мог понять, что именно происходит?

Я прочитал учебник о событиях на learningjquery.com, но за последние несколько дней я не добился достаточного прогресса, так как начал работать с JS / jquery, чтобы понять шаги и перевести его в мой пример / задачу. И у меня заканчивается время (мне нужно это для опроса, который я должен сделать как можно скорее, поэтому я надеюсь, что кто-то может дать мне подсказку, чтобы я мог как-то решить эту маленькую проблему).

Большое спасибо, Марк.

Answer 1

По какой причине вы не можете просто включить шоу в событие изменения, а не клик? Это немного чище кода, а не включать совершенно новое событие.

$(function() {
  $('.slider').wrap('<div></div>').parent().slider({
    change: function(event, ui) {
      $('input', this).val(ui.value);
      $('.ui-slider-handle').show();
    }
  });
});

Кроме того, в коде была небольшая избыточность - большинство функций jQuery возвращают сам объект, поэтому вы можете связать их. И вам не нужна каждая из этих функций, поскольку большинство функций jQuery при применении к коллекции запускаются на всех них:)