Question

在前面的示例中，我通过它的ID明确地捕获每个单击的列表项，这是不实际的＆amp;特别是有太多物品的效率。我想要实现的是动态获取它而无需对所有列表项进行硬编码。

$(function() {
    $("#a1").click(function()
    {
        document.getElementById("dropdown").innerHTML = "A-1";
        document.getElementById("result").innerHTML = process("a1");
    });

    $("#a2").click(function()
    {
        document.getElementById("dropdown").innerHTML = "A-2";
        document.getElementById("result").innerHTML = process("a2");
    });

    $("#a3").click(function()
    {
        document.getElementById("dropdown").innerHTML = "A-3";
        document.getElementById("result").innerHTML = process("a3");
    });
});

function process(param)
{
    // Some processing!
    return param;
}

Answer 1

根据位置选择元素：

$(function () {
    $(".dropdown-menu li").click(function () {
        var text = $(this).text();

        $("#dropdown").text(text);
        $("#result").text(process(text));
    });
});

因此，您不必查找#a1，而是查找<li>内的<ul class="dropdown-menu">元素。

演示：http://jsfiddle.net/Ht8eP/5/

Answer 2

要使用现有代码，尽可能少地更改代码，您可以绑定到ul.dropdown-menu li，并从其中的a获取HTML并使用当前（this） li的{{1}}值，与此相似：

id

DEMO - 用单击事件替换多个

Answer 3

您可以在所有<li>上使用相同的类，然后绑定到该类。至于具体细节，我建议使用id或data-id：

$(".a").click(function()
{
    document.getElementById("dropdown").innerHTML = "A-" + $(this).data('id');;
    document.getElementById("result")
                .innerHTML = process("a" + $(this).data('id'));
});

http://jsfiddle.net/ExplosionPIlls/Ht8eP/6/

Answer 4

为您需要处理的所有元素添加自己的属性，并编写通用的jquery select表达式，以根据您的属性选择所有这些元素。这样的事情......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <script src="jquery-1.6.1.min.js" type="text/javascript"></script>
    <script language="javascript">
        $(function () {
            $("[process]").click(function () {
                $("#dropdown").html($(this).attr("process"));
                $("#result").html($(this).attr("process"));
            });            
        });

        function process(param) {
            // Some processing!
            return param;
        }
    </script>
</head>
<body>
<a process="A-1" id="a1" href="#">A-1</a>
<a process="A-2" id="a2" href="#">A-2</a>
</body>
</html>

Answer 5

代码优化

$(function() {

    $("li","ul.dropdown-menu").click(function(){
        $("#dropdown").html($(this).html()) ;
        $("#result").html(process($(this).attr('id')));
    });
});

function process(param){
    // Some Processing!
    return(param);
}

获取点击列表项的ID

5 个答案: