jquery 如果图像具有点击属性

Question

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

基本上，我想检查图像的 anchor 中是否有特定的数据标签，当单击它时，它会停止链接并执行某些操作(基本上是制作我自己的灯箱)。

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

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

主要是使用的选择器不正确，稍微落后了一点，没有考虑到data-属性。在选择时，父级 -> 子级引用从左到右进行。所以左边是父级，最右边是子级。在本例中，我们希望有一个带有包含图像的数据属性的 anchor 元素。看起来像这样 $('a[data-eye] 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>