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 回答