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

【问题标题】：How do you specify the $('a').click event to select only specific <a> tags, not ALL <a> tags?您如何指定 $('a').click 事件以仅选择特定的 <a> 标签，而不是所有 <a> 标签？
【发布时间】：2019-11-29 16:47:28
【问题描述】：

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

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

Photoswipe 插件：

<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>

【问题讨论】：

忘记 jQuery。从 css 的角度思考。如果您只想定位图库内的链接，您的选择器会是什么样子？ #gallery a? .gallery a?这些都试过了吗？
通过勾选正确答案的检查，您可以关闭可以帮助未来寻求者的主题

标签： jquery html dom-events

【解决方案1】：

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

【讨论】：

【解决方案2】：

$(".a-photos").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();
  });

【讨论】：