Question

jQuery(document).ready(function($){
  $("#firstshow .dropdown-menu li a").click(function(){		
        $('#firstshow button b').html(this);
    });

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="firstshow">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><b>36</b>
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">12</a>
      </li>
      <li><a href="#">24</a>
      </li>
      <li><a href="#">36</a>
      </li>
    </ul>
  </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

主要思想是使这段代码像经典的html选择一样。

我这样做的原因是因为我没有弄清楚如何在选项菜单中更改蓝色悬停。

运行代码段并单击li内容。正如您在下次从我的列表中删除内容时所看到的那样，这是我的问题。如何保留li数据而不是在我的列表中删除？

Answer 1

你最内心的陈述应该是：

$('#firstshow button b').text($(this).text());

你使用它的方式是使用a元素对象作为按钮文本的HTML代码，但是你不想分配元素，而是它的文本。所以：

分配$(this).text()
使用text()而不是html()进行分配 - 更好的做法。

Answer 2

这是关于代码中的.html(this)部分。 this变量是对被单击的dom对象的引用。当您将其设置为显示的选择值的html时，它会移动dom对象并替换显示的内容。

要克服此问题，请将显示的值设置为要单击的元素的文本值。

jQuery(document).ready(function($){
  $("#firstshow .dropdown-menu li a").click(function(){		
        $('#firstshow button b').html($(this).text());
    });

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="firstshow">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><b>36</b>
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">12</a>
      </li>
      <li><a href="#">24</a>
      </li>
      <li><a href="#">36</a>
      </li>
    </ul>
  </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Jquery替换文本而不删除列表

2 个答案: