Question

如果单击第一个链接，则要显示/警告Cat100。如果单击第二个链接，则Cat200。

如何获取此内容？我找不到解决方案。非常感谢您的帮助。

$(".filter").click(function() {
  alert("Value: " + $("a.div").text); // doesn't work!
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter">
  <a href="">
    <div class="type">Filter</div>
    <div class="title">Cat100</div>
  </a>
</div>

<div class="filter">
  <a href="">
    <div class="type">Filter</div>
    <div class="title">Cat200</div>
  </a>
</div>

Answer 1

如果要从每个单独的text()元素中读取.title，则需要更改选择器以直接定位它们，您可以使用find()。

此外，您需要使用this关键字来引用所单击的元素，并在()之后添加.text以实际调用该函数。最后，您需要在引发的preventDefault()事件上调用click，以阻止父<a>元素卸载页面并导致重定向。试试这个：

$(".filter").click(function(e) {
  e.preventDefault();
  console.log("Value: " + $(this).find('.title').text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter">
  <a href="">
    <div class="type">Filter</div>
    <div class="title">Cat100</div>
  </a>
</div>

<div class="filter">
  <a href="">
    <div class="type">Filter</div>
    <div class="title">Cat200</div>
  </a>
</div>

Answer 2

首先，您应该阻止事件的默认操作（单击链接），因此页面不会更改。比我期望您想要的标题例如 Cat100 ，但是您的听众在1000上，因此您需要找到具有.filter类的div并从中获取title：

text()

$(".filter").on('click', function(event) {
    event.preventDefault();
    alert("Value: " + $(this).find('div.title').text());
});

Answer 3

您可以通过定位。title div。

这是一个可运行的代码段，用于演示：

$(".filter").click(function(e) {
  e.preventDefault(); // to prevent the link from move to another page.
  // for UX on the site, I changed the alert() by console.log(), just for this demo. You can change it back to alert if you want.
  console.log('Value: ' + $(this).find('.title').text()); 

});

<div class="filter">
  <a href="">
    <div class="type">Filter</div>
    <div class="title">Cat100</div>
  </a>
</div>

<div class="filter">
  <a href="">
    <div class="type">Filter</div>
    <div class="title">Cat200</div>
  </a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

获取单击的.filter的文本

3 个答案: