Question

我有以下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>后，我需要使用list标签的HTML替换“导航名称”

这是我正在使用的jQuery和jsfiddle here

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并替换.action类html，这是“导航名称”？由于下拉列表将动态生成，我需要使用一种方法来获取所点击的li的HTML，但不知道如何编写它。

由于

Answer 1

$("#nav > li > a").click(function(e) {
    e.preventDefault();
    $(".action").html($(this).text() + '<span class="caret"></span>');
});

Answer 2

$('#nav li').on('click', function (e) {
    e.preventDefault();
    $('.action').html($(this).text() + '<span class="caret"></span>');
});

JSFiddle.

使用jQuery将点击的li html复制到另一个标签中

2 个答案: