微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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函数在应用于集合时都可以在所有函数上运行:)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐