JQuery点击带有href属性的链接

Question

我有以下代码结构。 它是一组 wordpress 标签。 我在整个网站上有很多选项卡，使用 Jquery 我想在用户单击其中一个链接时触发一个功能，但是我无法应用 ID 属性，所以我下面的功能不起作用......有什么建议吗？

查询

$('#1485856532455-70ee0dfe').on('click', function() {
$('.otherdiv').css('background-image', 'url(http://placehold.it/200x200/ff0000)');
})

HTML

<ul class="vc_tta-tabs-list">
<li class="vc_tta-tab">
<a href="#1485856532455-70ee0dfe"> <span class="vc_tta-title-text">Title</span></a>
</li>

<li class="vc_tta-tab">
<a href="#1485856532489"><span class="vc_tta-title-text">Title</span></a></li>
</ul>

Answer 1

您不能通过 ID 选择它们，因为它们没有 ID。 但是您可以使用CSS Atrribute-Equal Selector通过href属性获取它们。 像这样：

$('[href="#1485856532455-70ee0dfe"]').on('click', function() {
    // ...
}

更多 CSS 选择器在这里。

工作代码片段：

 $('[href = "#1485856532455-70ee0dfe"]').click(function() { alert("#1485856532455-70ee0dfe was clicked! Hoooray!"); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="vc_tta-tabs-list"> <li class="vc_tta-tab"> <a href="#1485856532455-70ee0dfe"> <span class="vc_tta-title-text">Title</span> </a> </li> <li class="vc_tta-tab"> <a href="#1485856532489"><span class="vc_tta-title-text">Title</span></a> </li> </ul>

Answer 2

然后使用属性选择器：

$('[href="#1485856532455-70ee0dfe"]').on('click', function() {....});

Answer 3

$('#1485856532455-70ee0dfe').on('click', function() { - 表示在页面上我们有一些 id 为 1485856532455-70ee0dfe 的元素。在你的 html 代码中没有 id，文本为 14858565324555-70 那是为什么代码不起作用。

您有两种情况需要解决：

1. 将 id 添加到所需元素

2. 将 js 更改为$('[href="1485856532455-70ee0dfe"]').on('click', function() {

Answer 4

你不能给这样的链接一个 id。 但是，您可以通过执行 $('[href="#1485856532455-70ee0dfe"]').on('click', function() {....}); 来选择带有 jquery 的链接。