Question

我的页面有一堆下拉按钮，例如：

    <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查询）。如何让下拉按钮仅更新按下的下拉按钮上的文本？

Answer 1

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

<强> Check Fiddle

下拉按钮：更新页面上单个按钮的选择文本

1 个答案: