下拉按鈕：更新單個按鈕選擇文本頁面上

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