Question

这是我的HTML代码，其中包含一些<li>个标记。我计划使用Speed 1，Speed 2，Speed 3等来替换Content。我怎么能在Javascript上做到这一点？

<div class="btn-group">
  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
    Content <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#" onclick="javascript:xxxx">Speed 1</a></li>
    <li><a href="#">Speed 2</a></li>
    <li><a href="#">Speed 3</a></li>
    <li><a href="#">Speed 4</a></li>
    <li><a href="#">Speed 5</a></li>
  </ul>
</div>

有人可以给我建议吗？

Answer 1

试试这个，

$('li a').on('click',function(e){
    e.preventDefault();
    $('button').text($(this).text());    
});

Live Demo

Answer 2

我误解了这个问题并且已经改变了修复它的解决方案：

$(".dropdown-menu > li > a").click( function (e) {
   e.preventDefault();
   $(this).parent().parent().prev().text($(this).text());
})

你可以使用其中一个按钮类甚至是按钮html标签来解决这个变化，但是通过使用相对路径，你可以使用正确的元素，而无需更改页面上的其他按钮。

fiddle

Answer 3

回答你的问题...........：

http://jsfiddle.net/MFmwy/

<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
Content <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href=# onclick=javascript:xxxx>Speed 1</a></li>
<li><a href=#>Speed 2</a></li>
<li><a href=#>Speed 3</a></li>
<li><a href=#>Speed 4</a></li>
<li><a href=#>Speed 5</a></li>
</ul>
 </div>

Answer 4

试试这个

<强> HTML ：

    <div class="btn-group">
  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
    Content <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href=# onclick=javascript:xxxx>Speed 1</a></li>
    <li><a href=#>Speed 2</a></li>
    <li><a href=#>Speed 3</a></li>
    <li><a href=#>Speed 4</a></li>
    <li><a href=#>Speed 5</a></li>
  </ul>
</div>

<强> Jquery的：

$('li a').click(function(){
  $('button').text($(this).text());

});

JsFiddle

Answer 5

您需要注意不替换<span class="caret"></span>，因此您需要稍微修改HTML以为其添加额外的span含量：

<强> HTML：

  <div class="btn-group">
      <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
          <span>Content</span><span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Speed 1</a></li>
        <li><a href="#">Speed 2</a></li>
        <li><a href="#">Speed 3</a></li>
        <li><a href="#">Speed 4</a></li>
        <li><a href="#">Speed 5</a></li>
      </ul>
    </div>

<强>使用Javascript：

$('li a').on('click', function (e) {
    e.preventDefault();
    $('button span:first').text($(this).text());
});

参见 JSFiddle

编辑：另一种选择

根据您在关于在页面刷新时加载内容的另一个答案中所做的评论，您可以利用页面地址的“哈希”部分。因此

<强> HTML：

<div class="btn-group">
  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
      <span>Content</span><span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#speed1">Speed 1</a></li>
    <li><a href="#speed2">Speed 2</a></li>
    <li><a href="#speed3">Speed 3</a></li>
    <li><a href="#speed4">Speed 4</a></li>
    <li><a href="#speed5">Speed 5</a></li>
  </ul>
</div>

<强>使用Javascript：

$(window).bind('hashchange', onChangeSelectedSpeed);

function onChangeSelectedSpeed() {
    $("li a[href="+window.location.hash+"]").each(function(){
        $('button span:first').text($(this).text());
    });
}

//Trigger hashchange on page load (on DOM ready)
$(window).trigger('hashchange');

这是 JSFiddle 显示它有效（尽管页面刷新无法在那里证明）。

Javascript替换<li>标记</li>中的内容

5 个答案:

fiddle