javascript-jQuery ui.slider：添加click事件以显示/隐藏句柄

我对javascript和jquery完全陌生.我的编程知识不存在.几天前,我才刚开始做一些简单的任务,例如替换CSS类或切换div.因此,我想在这里问新手问题,以示对自己的脚步表示歉意.但我希望有人能帮助我解决我的问题.

我需要为调查实施某种视觉模拟量表； ui.slider非常适合那个.但我需要默认情况下隐藏该句柄.当用户单击滑块时,手柄应出现在正确的位置.这应该非常简单-至少我希望如此-只需用css隐藏手柄并通过滑块上的click事件对其进行更改即可.

我使用以下代码将普通的div(在我的理解中需要div应用于jquerylider.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);
        }
    });
});
});

如上所述,通过更改a.ui-slider-handle的样式属性,可以通过CSS来隐藏滑动器句柄.但是,当我向滑块(.ui-slider)添加一个普通的click事件来更改手柄的CSS属性时,什么也没有发生.就我的基本知识而言,它应该与click事件有关,不适用于生成的DOM元素.我适合那个吗？如果是,我该如何解决这个问题？有人可以为我的函数提供一段代码并对其进行解释,以便使我理解到底发生了什么吗？

我在learningjquery.com上阅读了有关事件的教程,但是自从我开始使用JS / jquery来理解步骤并将其转换为我的示例/问题以来,最近几天我没有取得足够的进展.而且我的时间不多了(我需要尽快进行调查,这就是为什么我希望有人可以给我一个提示,以便我可以以某种方式解决这个小问题).

非常感谢,
渣.

解决方法:

您有什么理由不能只将变更显示包括在更改事件中,而不仅仅是单击？从代码角度讲,它比使用一个全新事件更为简洁.

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

另外,代码中有一些冗余-大多数jQuery函数返回对象本身,因此您可以链接它们.而且您不需要每个函数,因为大多数jQuery函数在应用于集合时都可以在所有函数上运行：)

标签：jquery-ui,javascript,jquery
来源： https://codeday.me/bug/20191210/2103052.html