更改多个对象的类的更简单方法

Easier way to change classes on multiple objects

本文关键字：方法 更简单 对象      更新时间：2023-09-26

我正在编写一个包含大量"选项卡"的页面，每个选项卡都有一段文本，当您单击选项卡时，该文本应该可见。

到目前为止没有问题，我通过使用"clickfunction"和"add/removeClass"来实现这一点。但是现在的事情是，有很多选项卡被添加到页面中，我的JS文件确实被略有不同的引用弄乱了。有没有更简单、更有效的方法可以做到这一点？我的代码如下所示：

该选项卡： 

<li id="a2b" class="blok roze">
    <i class="fa fa-bus"><span>A2B Transfers</span></i>
</li>

选项卡的内容：

<div class="a2b sysBox nonVisible">
    <h3>A2B Transfers</h3>
    <p>Informatie volgt binnenkort</p>
    <div class="line"></div>
    <div class="btnBox">
        <a href="http://www.a2btransfers.com/" target="_blank">
            <div class="btnSystem">Ga naar A2B Travel</div>
        </a>
    </div>
</div>

和JS片段之一：

$('#vakantieveilingen').click(function() {
    $('.vakantieveilingen').removeClass('nonVisible').addClass('visible');
    $('.a2b').removeClass('visible').addClass('nonVisible');
    $('.bedsonline').removeClass('visible').addClass('nonVisible');
    $('.holidaytaxis').removeClass('visible').addClass('nonVisible');
    $('.hotelbeds').removeClass('visible').addClass('nonVisible');
    $('.actievandedag').removeClass('visible').addClass('nonVisible');
    $('.alturabeds').removeClass('visible').addClass('nonVisible');
    $('.eazzypark').removeClass('visible').addClass('nonVisible');
    $('.europeesche').removeClass('visible').addClass('nonVisible');
    $('.exclusivehotels').removeClass('visible').addClass('nonVisible');
    $('.expedia').removeClass('visible').addClass('nonVisible');
    $('.floow').removeClass('visible').addClass('nonVisible');
    $('.groupon').removeClass('visible').addClass('nonVisible');
    $('.lmx').removeClass('visible').addClass('nonVisible');
    $('.med').removeClass('visible').addClass('nonVisible');
    $('.miki').removeClass('visible').addClass('nonVisible');
    $('.parkfly').removeClass('visible').addClass('nonVisible');
    $('.taxibreburg').removeClass('visible').addClass('nonVisible');
    $('.thomascook').removeClass('visible').addClass('nonVisible');
    $('.transavia').removeClass('visible').addClass('nonVisible');
    $('.jumbo').removeClass('visible').addClass('nonVisible');
});

我希望有人知道如何处理好这个问题。

您应该能够使用通用类和属性将所有选项卡的一键式处理程序缩减为一键式处理程序

我不确定选择器中的 ID $('#vakantieveilingen')在您的 HTML 中引用什么，但您的最终结果应该相当简单，例如：

$('.blok').click(function(){
   var targetClass= '.' + this.id;
   // hide all content blocks
   $('.sysBox').removeClass('visible').addClass('nonVisible');
   // show content related to this tab
   $(targetClass).removeClass('nonVisible').addClass('visible')
});

您可以将 jQuery 选择器分组为：

$('.thomascook, .transavia, .jumbo').removeClass('visible').addClass('nonVisible'); });

以缩短 JS 代码。

相关文章：