为什么我得到的是所有链接的文本，而不是.text()函数点击的链接

Question

单击A1-810或A1-820链接时。

输出是这样的

A1-810

ICONIA A系列
A1-810
A1-820

现在HTML导航链接有点复杂，实际上导航栏中有200多个链接，但我复制了一些代码，以便您能够理解。

$(document).ready(function() {
$("li").click(function() {
var a = $(this).text();
console.log(a)
return;
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-unstyled">
<li class="dropdown"><a href="#" class="dropdown-toggle">ICONIA A-SERIES</a>
<ul class="list-unstyled">
<li><a href="#">A1-810</a></li>
<li><a href="#">A1-820</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle">ICONIA B-SERIES</a>
<ul class="list-unstyled">
<li><a href="#">B1-710</a> </li>
<li><a href="#">B1-720</a> </li>
</ul>
</li>
<li class="dropdown"><a href="" class="dropdown-toggle">LIQUID</a>
<ul class="list-unstyled">
<li><a href="">A1-S100</a> </li>
<li><a href="">Z200</a> </li>
</ul>
</li>
</div>
</li>
</ul>

Answer 1

将事件侦听器附加到LI而不是

LI.text()将显示该LI 的所有子项

当你附加到A时，点击的锚的内容也会显示出来，也可以使用preventDefault，这样链接就不会跟随

$(document).ready(function() {
$(".list-unstyled a").on("click", function(e) {
e.preventDefault(); // don't follow the link
var a = $(this).text();
console.log(a)
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-unstyled">
<li class="dropdown"><a href="#" class="dropdown-toggle">ICONIA A-SERIES</a>
<ul class="list-unstyled">
<li><a href="#">A1-810</a></li>
<li><a href="#">A1-820</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle">ICONIA B-SERIES</a>
<ul class="list-unstyled">
<li><a href="#">B1-710</a> </li>
<li><a href="#">B1-720</a> </li>
</ul>
</li>
<li class="dropdown"><a href="" class="dropdown-toggle">LIQUID</a>
<ul class="list-unstyled">
<li><a href="">A1-S100</a> </li>
<li><a href="">Z200</a> </li>
</ul>
</li>
</div>
</li>
</ul>

Answer 2

这是因为当您单击A1-810时，它位于<li>中，但该<li>本身位于其父级<li>中，因此也会单击该父级。如果您注意到console.log显示格式化的输出。这是因为它还将html从父<li>渲染到其所有子

以下是如何只针对一个点击的用户。

$(".links").click(function() {    
var a = $(this).text();     
console.log(a)  ;  
return;   });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li><a href="#" class="links">A1-810</a></li>
<li><a href="#" class="links">A1-820</a></li>