jquery如果图像在单击时具有属性

我正在学习如何正确使用jquery，我似乎无法理解为什么这种方法不能阻止锚重定向

基本上，我想检查一个图像是否有一个特定的数据标签在其锚，当点击它停止链接，并做一些事情（基本上是我自己的灯箱）

html

---

请尝试使用属性选择器：

$（'a[data]'）

在英语中，这表示：“选择所有具有属性“data ocular”的锚定标记，并将此单击处理程序添加到锚定标记中。”单击处理程序阻止锚定的默认单击行为，然后在单击的链接上显示带有

data ocular

属性值的警报

此

引用单击并用

$包装的元素（此）

提供JQuery sugar，允许您调用

.attr

并获取属性值

---

演示：

标签

a

不是

img

标签的子项。相反。但您可以将其简化为：

$('a[data-ocular]').on('click', function(event) {
   event.preventDefault();
   alert('Ocular Tag');
});

---

只需基于CSS选择器进行绑定。在这种情况下，将所有“a”标记与属性数据绑定

      $('a[data-ocular]').click(function(event) {
          event.preventDefault();
          alert('Ocular Tag');
          return false;
      });

---

您的代码有一些问题。首先，不需要使用if语句检查选择器是否存在。这是因为jQuery将以静默方式失败，因此如果选择器不匹配，则什么也不会发生。因此，只需直接分配事件处理程序

主要是，使用的选择器不正确，因为它稍微向后，并且没有考虑数据属性。在选择中，父->子引用从左到右。所以左边是父母，最右边依次是孩子。在本例中，我们希望有一个带有数据属性的锚元素，该属性包含一个图像。这看起来像是

$（'a[data-yellour]img'）

$（'a[data]img'）。单击（函数（事件）{
event.preventDefault（）；
警报（“眼标签”）；
});




$（'a[data ocular]'）应该可以工作-这意味着选择所有具有data ocular属性的a标记。我认为应该注意的是，元素不应该包含其他元素（它是空元素，并且是自动关闭的），因此选择器
img a
从一开始就没有意义。大多数答案似乎都忽略了这一点，我们没有忽略它。这不是问题的一部分，他的标记实际上没有在图像标记中包含任何内容。只有他的选择器是错的。谢谢你的解释。现在完全有道理了。附带问题：我可以在任何元素之后添加[attribute name]来检查它是否存在吗？比如$（'img[data title]'）@Packy-是的，你可以，那也行。您还可以在这里看到可用选择器的完整列表：@Packy-jQuery使用的选择器基本上都是css选择器。它本质上包装了本机javascript的（还有querySelectorAll）特性。请在此处和此处查看有关选择器的更多信息：谢谢。现在这样做更有意义了。
$('a[data-ocular]').click(function (event) {
  event.preventDefault();
  alert($(this).attr('data-ocular'));
});

$('a[data-ocular]').on('click', function(event) {
   event.preventDefault();
   alert('Ocular Tag');
});

      $('a[data-ocular]').click(function(event) {
          event.preventDefault();
          alert('Ocular Tag');
          return false;
      });