Question

我已经搜索过这个并且说实话，我认为答案可能适用于我，但我有点太过于努力了。

如果你能提供帮助那就太棒了。

基本上我有一组按钮可以动态地将一个类添加到CMS的文本字段中，并根据请求显示/隐藏。

代码有效但我想知道是否有人可以帮助我在语义上整理它，因为有重复的负载。我想解决的主要问题是应用.addClass和.removeClass甚至.toggleClass？变量而不是重复函数，但我需要每次都从var数组中删除一个对象。

无论如何，非常感谢任何帮助。

<button class='settings' title="Settings">SPARROWS SETTINGS</button>
<button class="staff" title="Staff">STAFF</button>
<button class="buildings" title="Staff">BUILDINGS</button>
<button class='services' title="Settings">SERVICES</button>
<button class="partners" title="Staff">PARTNERS</button>
<button class="network" title="Staff">NETWORK</button>

<div class="settings_init"><?php perch_content('childcare_text'); ?></div>
<div class="settings_text test"><?php perch_content('childcare_text'); ?></div>
<div class="staff_text test"><?php perch_content('staff_text'); ?></div>
<div class="buildings_text test"><?php perch_content('buildings_text'); ?></div>
<div class="services_text test"><?php perch_content('services_text'); ?></div>
<div class="partners_text test"><?php perch_content('partners_text'); ?></div>
<div class="network_text test"><?php perch_content('network_text'); ?></div>

$(document).ready(function(){

text=$('.staff_text, .buildings_text, .settings_text, services_text, partners_text, network_text'); 
button=$('.staff, .building, .settings, .services, .partners, .network');

$('.settings').click(function(){
    $('.settings_text').addClass("toggle");
    $('.staff_text, .buildings_text, .services_text, .partners_text, .network_text').removeClass("toggle");     
});
$('.staff').click(function(){
    $('.staff_text').addClass("toggle");
    $('.buildings_text, .settings_text, .services_text, .partners_text, .network_text').removeClass("toggle");
});
$('.buildings').click(function(){
    $('.buildings_text').addClass("toggle");
    $('.staff_text, .settings_text, .services_text, .partners_text, .network_text').removeClass("toggle");
});
$('.services').click(function(){
    $('.services_text').addClass("toggle");
    $('.staff_text, .buildings_text, .settings_text, .partners_text, .network_text').removeClass("toggle");
});
$('.partners').click(function(){
    $('.partners_text').addClass("toggle");
    $('.staff_text, .buildings_text, .settings_text, .services_text, .network_text').removeClass("toggle");
});
$('.network').click(function(){
    $('.network_text').addClass("toggle");
    $('.staff_text, .buildings_text, .settings_text, .services_text, .partners_text').removeClass("toggle");
});
button.click(function(){
    $('.settings_init').addClass('test'); 
});

});

Answer 1

您可以这样做：

<button onclick="setClass('settings_text')" class='settings' title="Settings">SPARROWS SETTINGS</button>
<button onclick="setClass('staff_text')" class="staff" title="Staff">STAFF</button>
<button onclick="setClass('buildings_text')" class="buildings" title="Staff">BUILDINGS</button>
<button onclick="setClass('services_text')" class='services' title="Settings">SERVICES</button>
<button onclick="setClass('partners_text')" class="partners" title="Staff">PARTNERS</button>
<button onclick="setClass('network_text')" class="network" title="Staff">NETWORK</button>

<div class="settings_init"><?php perch_content('childcare_text'); ?></div>
<div class="settings_text test"><?php perch_content('childcare_text'); ?></div>
<div class="staff_text test"><?php perch_content('staff_text'); ?></div>
<div class="buildings_text test"><?php perch_content('buildings_text'); ?></div>
<div class="services_text test"><?php perch_content('services_text'); ?></div>
<div class="partners_text test"><?php perch_content('partners_text'); ?></div>
<div class="network_text test"><?php perch_content('network_text'); ?></div>
<script>
    function setClass(elementClass) {
        $(".toggle").removeClass("toggle");
        $("." + elementClass).addClass("toggle");
    }
</script>

Answer 2

或者这个：

HTML：

<button class="settings" name="button" title="Settings">SPARROWS SETTINGS</button>
<button class="staff" name="button" title="Staff">STAFF</button>
<button class="buildings" name="button" title="Staff">BUILDINGS</button>
<button class="services" name="button" title="Settings">SERVICES</button>
<button class="partners" name="button" title="Staff">PARTNERS</button>
<button class="network" name="button" title="Staff">NETWORK</button>

<div class="settings_init">1</div>
<div class="settings_text test divs">2</div>
<div class="staff_text test divs">3</div>
<div class="buildings_text test divs">4</div>
<div class="services_text test divs">5</div>
<div class="partners_text test divs">6</div>
<div class="network_text test divs">7</div>

使用Javascript：

$(document).ready(function () {
    $('[name=button]').click(function () {
        $('.settings_init').addClass('test'); 
        $('.divs').removeClass('toggle');
        $('.' + $(this).attr('class') + '_text').addClass('toggle');
    });
});

Answer 3

您可以使用这些元素列表（button和text）：

button.click(function () {
    var cls = this.className; // "staff" or "building" or "settings" or ...
    text.each(function () {
        var $this = $(this);
        $this.toggleClass(
            'toggle', $this.hasClass('.' + cls + '_text')
        );
    });
});

// I assume you want to do the following only one time

button.one('click', function () {
    $('.settings_init').addClass('test');
});

只要每个按钮不超过一个类，此方法就可以正常工作。

Answer 4

我建议使用数据属性：

<button class='settings' title="Settings" data-target='settings_text'>SPARROWS SETTINGS</button>
<button class="staff" title="Staff" data-target='buildings_text'>STAFF</button>
<button class="buildings" title="Buildings" data-target='buildings_text'>BUILDINGS</button>

<div class="settings_init" data-role="target"><?php perch_content('childcare_text'); ?></div>
<div class="settings_text test" data-role="target"><?php perch_content('childcare_text'); ?></div>
<div class="staff_text test" data-role="target"><?php perch_content('staff_text'); ?></div>
<div class="buildings_text test" data-role="target"><?php perch_content('buildings_text'); ?></div>

使用Javascript：

$(document).ready(function(){
    var buttons=$('button');
    var targets = $('div[data-role=target]')

    buttons.click(function() {
        var self = $(this),
            targetClass = self.attr('data-target'),
            $target = $('.' + targetClass);

        targets.removeClass("toggle");
        $target.addClass("toggle");
    });
});

从.click上的变量中删除类

4 个答案: