jquery 如果图像具有点击属性

Question

我只是在学习如何正确使用 jquery，我似乎无法弄清楚为什么这种方法不能阻止锚点重定向。

基本上，我想检查图像的锚点中是否有特定的数据标签，当点击它时它会停止 link 并做一些事情（基本上是制作我自己的灯箱）。

html

<ul class="imageList imgListIntro">
    <li>
        <a href="img/cc/intro-1.jpg"  
           data-ocular="test-1" 
           data-title="Test" 
           class="hvr-wobble-vertical">
            <img src="img/cc/intro-1.jpg" class="" />
        </a>
    </li>
</ul>

js

if ($('img a').attr('data-ocular')){
    $('img a').click(function(event) {
        event.preventDefault();
        alert('Ocular Tag');
    });              
}

Answer 1

尝试使用属性选择器：$('a[data-ocular]')。

$('a[data-ocular]').click(function (event) {
  event.preventDefault();
  alert($(this).attr('data-ocular'));
});

英文是这样说的："Select all anchor tags with the attribute 'data-ocular' and add this click handler to them." 点击处理程序会阻止锚点的默认点击行为，然后它会显示一个警报，其中包含 link 上的 data-ocular 属性值那被点击了。 this 指的是被点击的元素并用 $(this) 包装它给你 JQuery 允许你调用 .attr 并获取属性值的糖。

演示：http://codepen.io/Chevex/pen/qdrqYm

Answer 2

a 标签不是 img 标签的子标签。这是相反的。但您可以将其减少为：

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

Answer 3

只需根据 CSS 选择器进行绑定。在这种情况下，将所有 "a" 标签与属性 data-ocular.

绑定

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

Answer 4

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

主要是选择器用的不对，稍微有点落后，没有考虑data-属性。在选择中，parent -> child 引用从左到右。所以左边是parent，最右边是children。在这种情况下，我们希望有一个锚元素，其数据属性包含一个图像。看起来像这样 $('a[data-ocular] img')

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="imageList imgListIntro">
  <li>
    <a href="img/cc/intro-1.jpg"  data-ocular="test-1" data-title="Test" class="hvr-wobble-vertical"><img src="img/cc/intro-1.jpg" class=""></a>
  </li>
</ul>

jquery 如果图像具有点击属性

jquery if image has attribute on click

jquery

custom-data-attribute