如果圖像具有點擊屬性，則jquery

Question

我正在學習如何正確使用jquery，我似乎無法弄清楚為什么這種方法不會阻止錨重定向。

基本上，我想檢查一個圖像是否在其錨點中有一個特定的數據標簽，當點擊它時，它會停止鏈接並做一些事情（基本上是自己制作燈箱）。

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標簽不是img標簽的子標簽。 這是相反的。 但你可以減少到：

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

Answer 2

只需基於CSS選擇器進行綁定。 在這種情況下，使用屬性data-ocular綁定所有“a”標記。

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

Answer 3

您的代碼存在一些問題。 首先，不需要使用if語句來檢查選擇器的存在。 那是因為jQuery會以靜默方式失敗，因此如果選擇器不匹配則沒有任何反應。 所以直接分配事件處理程序。

主要是，使用的選擇器是不正確的，因為它略微向后並且沒有考慮數據屬性。 在選擇中，父 - >子引用從左到右。 所以左邊是父母，最右邊是孩子。 在這種情況下，我們希望擁有一個包含圖像的數據屬性的錨元素。 這看起來像這個$('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> 

Answer 4

嘗試使用屬性選擇器： $('a[data-ocular]') 。

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

在英語中，這表示：“選擇具有'data-ocular'屬性的所有錨標簽，並將此單擊處理程序添加到它們中。” 單擊處理程序會阻止錨點的默認單擊行為，然后它會在單擊的鏈接上顯示一個帶有data-ocular屬性值的警報。 this是指點擊並用$(this)包裝它的元素$(this)為您提供允許您調用.attr並獲取屬性值的JQuery糖。

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