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代わりに にバインドし、その内部から HTML を取得してa、現在の ( 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

コードの最適化

$(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 に答える
0

すべてで同じクラスを使用して、<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/

于 2013-01-31T23:31:49.853 に答える
0

処理する必要があるすべての要素に独自の属性を追加し、属性に基づいてこれらすべての要素を選択する汎用の 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>
于 2013-01-31T23:39:20.693 に答える