时间戳

首页 > 解决方案 > 使用 jQuery 根据锚点的焦点向父 div 添加类

jquery - 使用 jQuery 根据锚点的焦点向父 div 添加类

问题描述

我有一个锚点列表，我希望他们根据当前关注的锚点向特定的 div ID 添加一个唯一类。我让它为锚悬停工作，但我很难弄清楚如何也为锚焦点做这件事。我想实现锚焦点，这样即使有人通过键盘导航锚，他的类仍然会被添加到 div ID 中。

这是我的悬停类代码（可能会被清理）。#industries如果锚有焦点（不仅仅是悬停），我需要将这些类（每个锚唯一）添加到div 中。

HTML结构：

<div id="industries" class="et_pb_section">
    <div class="et_pb_row">
        <div class="et_pb_column">
            <div id="industries-list" class="et_pb_module">
                <div class="et_pb_text_inner">
                    <ul>
                        <li><a href="#education">Education</a></li>
                        <li><a href="#energy">Energy</a></li>
                        <li><a href="#healthcare">Healthcare</a></li>
                    </ul>
                </div>
            </div> <!-- .et_pb_text -->
        </div> <!-- .et_pb_column -->
    </div> <!-- .et_pb_row -->
</div> <!-- .et_pb_section -->

jQuery代码：

(function ($) {

    $(document).ready(function () {
        industriesBackgrounds();
    });

    function industriesBackgrounds() {
        $('#industries-list [href="#education"]').hover(function(){     
            $('#industries').addClass('industry-education-hover');    
        },
        function(){    
            $('#industries').removeClass('industry-education-hover');     
        });
        $('#industries-list [href="#energy"]').hover(function(){     
            $('#industries').addClass('industry-energy-hover');    
        },
        function(){    
            $('#industries').removeClass('industry-energy-hover');     
        });
        $('#industries-list [href="#healthcare"]').hover(function(){     
            $('#industries').addClass('industry-healthcare-hover');    
        },
        function(){    
            $('#industries').removeClass('industry-healthcare-hover');     
        });
    }

})(jQuery);

更新：

industriesBackgrounds现在，通过将此代码添加到我的函数中，我可以进行这种工作。

$('#industries').delegate( '#industries-list a[href="#education"]', 'focus blur', function() {
    var anchor = $( this );
    setTimeout(function() {
        $('#industries').toggleClass( 'industry-education-focus', anchor.is( ":focus" ) );
    }, 0 );
});
$('#industries').delegate( '#industries-list a[href="#energy"]', 'focus blur', function() {
    var anchor = $( this );
    setTimeout(function() {
        $('#industries').toggleClass( 'industry-energy-focus', anchor.is( ":focus" ) );
    }, 0 );
});
$('#industries').delegate( '#industries-list a[href="#healthcare"]', 'focus blur', function() {
    var anchor = $( this );
    setTimeout(function() {
        $('#industries').toggleClass( 'industry-healthcare-focus', anchor.is( ":focus" ) );
    }, 0 );
});

我不确定这是否是最好的方法。但是，由于用户在技术上可以让一个锚点聚焦，而将鼠标悬停在另一个锚点上，因此使用 2 个单独的类（一个用于聚焦，一个用于悬停）来确定真正发生的“事件”可能是理想的。

但这是对这两种状态进行编码的最佳方式吗？是否有更清洁的解决方案来实现向 ID 添加类、悬停和聚焦的目标？

标签： jqueryfocusanchoronfocus

解决方案

您可以通过组合选择器和事件委托来缩短代码。.hover()是 的简写mouseenter mouseleave：

如果我有一个工作示例，我会提供更多建议。

看这个例子：

(function($) {

  $(document).ready(function() {
    industriesBackgrounds();
  });

  function industriesBackgrounds() {
    $('#industries-list a').on("mouseenter mouseleave", function(e) {

      const type = e.type;
      const href = jQuery(this).attr("href").replace("#", "");

      $('#industries').toggleClass(`industry-${href}-hover`, type == 'mouseenter');
      
      console.log((type == 'mouseenter') ? `Added` : `Removed`, `industry-${href}-hover`);
    }).on("focus blur", function(e) {

      const type = e.type;
      const href = jQuery(this).attr("href").replace("#", "");

      $('#industries').toggleClass(`industry-${href}-hover`, type == 'focus');
      console.log((type == 'focus') ? `Added` : `Removed`, `industry-${href}-hover`);

    });
  }

})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="industries" class="et_pb_section">
  <div class="et_pb_row">
    <div class="et_pb_column">
      <div id="industries-list" class="et_pb_module">
        <div class="et_pb_text_inner">
          <ul>
            <li><a href="#education">Education</a></li>
            <li><a href="#energy">Energy</a></li>
            <li><a href="#healthcare">Healthcare</a></li>
          </ul>
        </div>
      </div>
      <!-- .et_pb_text -->
    </div>
    <!-- .et_pb_column -->
  </div>
  <!-- .et_pb_row -->
</div>
<!-- .et_pb_section -->

推荐阅读