1

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

jQuery：

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

        });
    });
});
4

2 回答 2

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')包含所有带有 class 的元素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，

通常需要引用触发事件处理程序的元素，例如在对一系列相似元素使用通用处理程序时。当使用 this 的值附加一个函数时 addEventListener()，注意这个值 this是从调用者传递给一个函数的。

于 2013-09-04T23:10:44.280 回答
1

在这里工作 jsFiddle

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

改变：

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

至：

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

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

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

于 2013-09-04T23:11:14.997 回答