使用 jQuery 根据聚焦的锚点将 class 添加到父级 div

Question

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

这是我的悬停 classes 代码（可能会被清理）。我需要将这些 classes（每个锚点唯一）添加到 #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 个单独的 classes（一个用于聚焦，一个用于悬停）可能是理想的选择，以确定真正的 "event" 正在发生。

但这是对这 2 个状态进行编码的最佳方式吗？是否有更清晰的解决方案来实现向 ID 添加 class 的目标，用于悬停和聚焦？

Answer 1

您可以通过组合选择器和事件委托来缩短代码。 .hover() 是 shorthand 对于 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 -->

使用 jQuery 根据聚焦的锚点将 class 添加到父级 div

Use jQuery to add class to parent div based on what anchor is focused

jquery

focus

anchor

onfocus

HTML结构：

jQuery代码：

更新：