0

私は次のHTMLを持っています

<div class="btn-group">
  <button class="btn dropdown-toggle action" data-toggle="dropdown">Nav name <span class="caret"></span></button>
  <ul id="nav" class="dropdown-menu test">
    <li><a href="#" id="action-1">one</a></li>
    <li><a href="#" id="action-2">two</a></li>
    <li><a href="#" id="action-3">three</a></li>
  </ul>
</div>

をクリックする<li>と、「ナビ名」を置き換えるリストタグの HTML が必要です

これは私が使用しているjQueryであり、ここではjsfiddleです

jQuery("#action-1").click(function(e){
 jQuery('.action').html('one <span class="caret"></span>');
e.preventDefault();
});
jQuery("#action-2").click(function(e){
 jQuery('.action').html('two <span class="caret"></span>');
e.preventDefault();
});
jQuery("#action-3").click(function(e){
 jQuery('.action').html('three <span class="caret"></span>');
e.preventDefault();
});

これは私が知っているきれいなコードではなく、もっとうまく書くことができます。$this を jQuery で使用して、li タグの HTML を取得し、「Nav 名」である .action クラスの html を置き換えるにはどうすればよいですか? ドロップダウン リストは動的に生成されるため、クリックされた li の HTML を取得するメソッドを使用する必要がありますが、その記述方法がわかりません。

ありがとう

4

2 に答える 2

2 
$("#nav > li > a").click(function(e) {
    e.preventDefault();
    $(".action").html($(this).text() + '<span class="caret"></span>');
});
于 2013-08-27T19:37:34.673 に答える
1 
$('#nav li').on('click', function (e) {
    e.preventDefault();
    $('.action').html($(this).text() + '<span class="caret"></span>');
});

JSFiddle。

于 2013-08-27T19:42:05.547 に答える