Jquery 获取已单击列表项的ID_Jquery_Twitter Bootstrap_Click

Jquery 获取已单击列表项的ID

jquery twitter-bootstrap

Jquery 获取已单击列表项的ID,jquery,twitter-bootstrap,click,Jquery,Twitter Bootstrap,Click,在上一个示例中，我通过ID显式捕获每个单击的列表项，特别是对于太多的项，这是不实用和高效的。我想要实现的是动态地获取它，而无需对所有列表项进行硬编码 $(function() { $("#a1").click(function() { document.getElementById("dropdown").innerHTML = "A-1"; document.getElementById("result").innerHTML = process

在上一个示例中，我通过ID显式捕获每个单击的列表项，特别是对于太多的项，这是不实用和高效的。我想要实现的是动态地获取它，而无需对所有列表项进行硬编码

$(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;
}

根据图元的位置选择图元：

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

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

因此，您不需要查找a1，而是要查找内部的元素

演示：

您可以在所有服务器上使用相同的类，然后仅绑定到该类。至于细节，我建议使用id或数据id：

要使用现有代码，请尽可能少地对其进行更改，您可以绑定到ul.dropdown-menu li，从其中的a获取HTML，并使用当前此li的id值，如下所示：

$("ul.dropdown-menu li").click(function() {
    var $link = $(this);
    document.getElementById("dropdown").innerHTML = $("a", $link).html();
    document.getElementById("result").innerHTML = process(this.id);
});

-将多个事件替换为单击事件

为需要处理的所有元素添加您自己的属性，并编写一个通用jqueryselect表达式，以基于您的属性选择所有这些元素。像这样的

<!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>

代码优化

$(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&不是$this.id？你能告诉我吗..这是指DOM元素。默认情况下，DOM元素有一个id字段，就像它有一个innerHTML或value字段以及其他一些字段一样。仅仅为了访问id或innerHTML字段，不需要在其周围包装jQuery包装器。当然，如果您想要包装，则不会有任何伤害，也不会有任何明显的性能损失。只是不需要。

$(function() {

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

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