jquery - 如何指定 $ ('a' ).click 事件以仅选择特定的 标签，而不是所有 标签？

Question

我添加了 photoswipe 插件，可以使用 <a> 搜索我的所有照片。标签，如果点击，照片就会变成全屏。我让它工作了，但现在我的导航栏(有 <a> 标签)在点击时会触发 photoswipe 插件。

在 photoswipe 点击事件中，我尝试过 $("a[href*='photo']").click(function(event)以便单击事件仅在 a 时触发有一个 href包含单词photo ——这并没有解决问题。

照片滑动插件:

<script>
    'use strict';

    /* global jQuery, PhotoSwipe, PhotoSwipeUI_Default, console */

    (function($){

      // Init empty gallery array
      var container = [];

      // Loop over gallery items and push it to the array
      $('#gallery').find('div.item').each(function(){
        var $link = $(this).find('a'),
            item = {
              src: $link.attr('href'),
              w: $link.data('width'),
              h: $link.data('height'),
              title: $link.data('caption')
            };
        container.push(item);
      });

      // Define click event on gallery item
      $("a").click(function(event){

        // Prevent location change
        event.preventDefault();

        // Define object and gallery options
        var $pswp = $('.pswp')[0],
            options = {
              index: $(this).parent('div.item').index(),
              bgOpacity: 0.85,
              showHideOpacity: true
            };

        // Initialize PhotoSwipe
        var gallery = new PhotoSwipe($pswp, PhotoSwipeUI_Default, container, options);
        gallery.init();
      });

    }(jQuery));
  </script>

照片 HTML:

<div id="gallery" class="gallery grid" itemscope itemtype="http://schema.org/ImageGallery">
  <div class="item" data-color="photography" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
            <a href="photo/IMG_2322.JPG" data-caption="This is a caption" data-width="1200" data-height="900" itemprop="contentUrl">
              <img class="crop lazy" data-src="photo/IMG_2322.JPG" itemprop="thumbnail" alt="Image description">
            </a> 
   </div>
</div>

我的导航栏:

<nav class="navigation">
  <a href="#" class="menu-icon">
    <i class="fa fa-bars"></i>
  </a>
  <ul class="main-navigation" role="navigation">
  <div id="nav-x" class="menu-icon">&Cross;</div>
       <li><a href="index.html">Home</a></li> 
       <li><a href="shop.html">Shop</a></li>
  </div>
  </ul>
</nav>

Answer 1

不要使用“a”标签，而是将 class="a-photos" 添加到所有照片并按类别触发可能会解决您的问题。