Question

Here是小提琴。我正在制作我自己的自定义下拉框（因为我想要设置样式），我无法获得<li>的唯一文本。我想这样做的原因是：在默认下拉框中，它显示您在框中单击的内容的文本。更具体地说，我正在尝试从<li>您点击中获取文字，并将其放入<div id='click'>。

jQuery的：

$(document).ready(function () {
    $('ol').hide();
    $('#click').click(function () {
        $(this).toggleClass('down');
        $('ol').toggle();
        $('.l').click(function () {

        });
    });
});

Answer 1

编辑：每次点击l

时，都无需向类#click的元素添加事件监听器

演示： ~~http://jsfiddle.net/43j8f/2/~~ http://jsfiddle.net/43j8f/5/

使用

$(document).ready(function () {
    $('ol').hide();
    $('#click').click(function () {
        $(this).toggleClass('down');
        $('ol').toggle();
    });
    $('.l').click(function () {
        $('#click').html($(this).html());
    });
});

如果您使用

$('.l').click(function () {
    $('#click').html( $('.l').html() );
});

问题是$('.l')包含所有带有l类的元素，而.html()只提供第一个的文本，而不是您点击的文本。

根据http://api.jquery.com/html/，

在HTML文档中，.html()可用于获取内容任何元素。如果选择器表达式匹配多个元素， 仅第一场比赛将返回其HTML内容

相反，当您使用事件处理程序时，this是触发处理程序的元素。

根据https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener#The_value_of_this_within_the_handler，

通常需要引用事件所在的元素处理程序被触发，例如在为系列使用通用处理程序时相似的元素。使用时附加功能 addEventListener()此值已更改 - 请注意该值 this从调用者传递给函数。

Answer 2

Working jsFiddle here

在$('.l').click()功能

中

变化：

var l = $('.l').html();

要：

var l = $(this).html();

顺便说一句，建议不要使用也是方法/命令的类/ ID名称。（例如#click）

我还更新了jsFiddle链接以演示在选择后显示/隐藏下拉列表

得到独特的文字

2 个答案: