Javascript替换<；李>；标签_Javascript_Jquery_Html

Javascript替换<；李>；标签

javascript jquery html

Javascript替换<；李>；标签,javascript,jquery,html,Javascript,Jquery,Html,这是我的HTML代码，其中有一些标记。我计划使用速度1、速度2、速度3等来替换内容。我如何在Javascript上实现它 <div class="btn-group"> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"> Content <span class="caret"></span> </button>

这是我的HTML代码，其中有一些

标记。我计划使用

速度1

、

速度2

、

速度3

等来替换

内容

。我如何在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>


内容

有人能给我一些建议吗？

我误解了这个问题，并改变了解决方案来解决它：

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

您可以使用一个button类，甚至button html标记来处理更改，但是通过使用相对路径，您将寻址正确的元素，而不会冒更改页面上其他按钮的风险

我误解了这个问题，并更改了解决方案来解决它：

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

您可以使用一个button类，甚至button html标记来处理更改，但是通过使用相对路径，您将寻址正确的元素，而不会冒更改页面上其他按钮的风险

试试这个

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

试试这个

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

回答您的问题


内容

回答您的问题………：


内容

试试这个

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>

试试这个

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>

您需要注意不要替换

，因此您需要稍微修改HTML，为内容添加额外的

span

：

HTML:

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

});

  <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>

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

<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>

$(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');

请参见

编辑：另一种选择

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

HTML:

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

});

  <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>

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

<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>

$(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');

下面是显示它工作的（尽管页面刷新在这里不明显）。

您需要注意没有替换
，因此您需要稍微修改HTML，为内容添加额外的
span
：
HTML:

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

<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>

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

<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>

$(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');
请参见
编辑：另一种选择
根据您在另一个回答中关于在页面刷新时加载内容的评论，您可以利用页面地址的“哈希”部分。所以
HTML:

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

<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>

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

<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>

$(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');

下面是显示它工作的（尽管页面刷新在这里不明显）。
“我听说你喜欢's[…]”我听说你喜欢's[…]”谢谢你的回答。但仍然存在一个问题。
不工作。你能给我一些建议来显示
速度X
和
是否有效吗？对不起，我不明白你在问什么。如果这是您的意思，我已经更正了示例代码中的复制粘贴错误。谢谢您的回答。但仍然存在一个问题。
不工作。你能给我一些建议来显示
速度X
和
是否有效吗？对不起，我不明白你在问什么。如果这是您的意思，我已经更正了示例代码中的复制粘贴错误。谢谢您的回答。但仍然存在一个问题。
不工作。你能给我一些建议来显示
速度X
和
是否有效吗？谢谢你的回答。但仍然存在一个问题。
不工作。你能给我一些建议来显示
速度X
和
是否有效吗？我不清楚你的问题。。你想要href=speed x如果value=speed x right？嗯<代码>是我应该链接到的url。根据
替换内容是另一回事。这是实现它的另一种方式。但仍然存在一个问题。你能帮我吗？谢谢你的回答。但仍然存在一个问题。
不工作。你能给我一些建议来显示
速度X
和
是否有效吗？谢谢你的回答。但仍然存在一个问题。
不工作。你能给我一些建议来显示
速度X
和
是否有效吗？我不清楚你的问题。。你想要href=speed x如果value=speed x right？嗯<代码>是我应该链接到的url。根据
替换内容是另一回事。这是实现它的另一种方式。但仍然存在一个问题。你能帮我吗？？