javascript - AddClass "active"其中Class与href相同，否则移除 "active"

Question

如果我点击 <a>，我可能做错了什么带有类“sw”和href="#m1"的标签，我需要从所有 <a> 中删除类“active”和 <div>带有“sw”类的标签，但我还需要在所有其余部分中添加“active”<a>和 <div>类标签与 <a> 中的 href 相同链接，我点击的地方。

也就是说，我需要从 href 中删除散列，因为我要查找的是类而不是 ID。

例如:

<a href="#m1" class="sw">CL1<a/>
<a href="#m2" class="sw active">CL2<a/>
<div class="sw m1>HELLO1</div>
<div class="sw m2 active>HELLO2</div>

如果我要单击 CL1，那么我需要从所有 sw div 和 a 中删除所有事件，而且我还需要将“事件”类添加到所有 div 和 a，其中 #m1 作为类。

我希望你能理解我:(

这是我的 2 个测试代码......

$('a.sw').on('click', function() { 
    var nohash = $(this).attr('href').replace('#', '');
    if ( !$( this ).hasClass( "active" ) ) {
        $('.sw').each(function() { 
            if($(this).hasClass('active')) { 
                $(this).removeClass('active');
            } else { 
                nohash.addClass('active');
            }
        });
    }
});

$( 'a.sw' ).on( 'click', function() {
   $('div.sw').removeClass( 'active' );
   $(this).href().replace('#', '').addClass( 'active' )
});

Answer 1

花点时间阅读 Decoupling Your HTML, CSS, and JavaScript - Philip Walton @ Google

根据您当前的代码，您的耦合度非常高，并且几乎没有重复使用您的代码。以下是我将如何重构它:

html:

<a href="#m1" class="js-sw active" data-sw-target=".sw-target-m1">CL1</a>
<a href="#m2" class="js-sw" data-sw-target=".sw-target-m2">CL2</a>
<div class="sw-target sw-target-m1 active">HELLO1</div>
<div class="sw-target sw-target-m2">HELLO2</div>

Javascript:

$(document).ready(function() {
  $('.js-sw').on('click', function() {
    $('.sw-target, .js-sw').removeClass('active');

    $(this).addClass('active');
    var selector = $(this).data('sw-target');
    $(selector).addClass('active');
  });
});

现在代码适用于标记为 .js-sw 的任何内容。您可以将目标选择器更改为您想要的任何内容，包括多个选择器(例如 data-sw-target=".sw-target, .someothertarget")。