2

http://jsfiddle.net/Ht8eP/3/

在前面的示例中，我通过它的 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;
}
4

5 回答 5

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/

于 2013-01-31T23:30:03.017 回答
1

要使用现有代码，尽可能少地更改它，您可以绑定到ul.dropdown-menu li相反并从其中获取 HTMLa并使用当前 ( this)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);
});

演示- 用单击事件替换多个

于 2013-01-31T23:33:08.117 回答
0

您可以在所有的上使用相同的类<li>，然后绑定到该类。至于细节，我建议使用idor 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/

于 2013-01-31T23:31:49.853 回答
0

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

<!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>
于 2013-01-31T23:39:20.693 回答
0

代码优化

$(function() {

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

function process(param){
    // Some Processing!
    return(param);
}
于 2013-02-03T03:31:33.573 回答