1

次のようなドロップダウンボタンがたくさんあるページがあります。

    <div class=\"button middle dropdown\"><a href=\"#\">Engineer</a>
    <ul>
    <li><a href=\"#\">Name1</a></li>
    <li><a href=\"#\">Name2</a></li>
    </ul></div>
    <div class=\"button middle dropdown\"><a href=\"#\">Engineer</a>
    <ul>
    <li><a href=\"#\">Name1</a></li>
    <li><a href=\"#\">Name2</a></li>
    </ul></div>

同じページに、ドロップダウンボタンのテキストを選択されたものに更新するためのこのjQueryがあります。

    $(document).ready(function() {
        $(".button.middle.dropdown ul li a").click(function() {
            var oldtext = $(".button.middle.dropdown a").html();
            var text = $(this).html();
            $(".button.middle.dropdown a").html(text);
            $(this).html(oldtext);
            $(".button.middle.dropdown a ul").hide();
        });     
    });

問題は、これにより、選択されたボタンだけでなく、ページ上のすべてのボタンのテキストが更新されることです。jqueryコードは、が存在するすべての場所で更新されているため、これは明らかにこれを行います.button.middle.dropdown a。追加id=""し<a>ますが、これらのボタンはページの読み込み時に動的に作成されます（SQLクエリから）。ドロップダウンボタンを取得して、押されたドロップダウンボタンのみのテキストを更新するにはどうすればよいですか？

4

1 に答える 1

2

使用する$(this)

それ以外の

$(".button.middle.dropdown a").html();

使用する

$(this).html();

完全なコード

$(document).ready(function() {
    $(".button.middle.dropdown ul li a").click(function() {
        var $this = $(this);
        var $link = $this.closest('.button.dropdown').children('a');
        var oldtext = $link.html();
        var text = $this.html();
        $link.html(text);
        $this.html(oldtext);
        $(".button.middle.dropdown a ul").hide();
    });
});​

フィドルをチェック

于 2012-12-25T19:54:01.493 に答える