Question

所以我有一些导航锚。我想在点击它们时更改页面上的一些基本配色方案。我能够做到这一点的唯一方法是使用下面的代码。

它工作正常，但我不禁想到有一种更优雅的方式。有人知道是否有可能一次性剥夺这些课程？

编辑：这可能更清楚了。我不希望原来的课程消失了。我想，只是添加了jQuery的类。对困惑感到抱歉。

感谢。

试图实施所有解决方案。

得到“{”错误“：”请使用POST请求“}”虽然......

编辑：这是因为href =“？”与指出的href =“＃”相对应。

    $(".home").click(function() {
        $(".primary-color").addClass("one");
            $(".primary-color").removeClass("two"); 
            $(".primary-color").removeClass("three");   
            $(".primary-color").removeClass("four");    
            $(".primary-color").removeClass("five");           
    });

    $(".services").click(function() {
        $(".primary-color").addClass("two");
            $(".primary-color").removeClass("one");
            $(".primary-color").removeClass("three");   
            $(".primary-color").removeClass("four");    
            $(".primary-color").removeClass("five");       
    });

    $(".pricing").click(function() {
        $(".primary-color").addClass("three");
            $(".primary-color").removeClass("one");
            $(".primary-color").removeClass("two");     
            $(".primary-color").removeClass("four");    
            $(".primary-color").removeClass("five");       
    });

    $(".special-thing").click(function() {
        $(".primary-color").addClass("four");
            $(".primary-color").removeClass("one");
            $(".primary-color").removeClass("two"); 
            $(".primary-color").removeClass("three");   
            $(".primary-color").removeClass("five");   
    });

    $(".contact").click(function() {
        $(".primary-color").addClass("five");
            $(".primary-color").removeClass("one");
            $(".primary-color").removeClass("two"); 
            $(".primary-color").removeClass("three");   
            $(".primary-color").removeClass("four");     
    });

Answer 1

只需$(".primary-color").removeClass()（不指定课程）就可以了！

或者，如果你只需要剥离类（留下其他重要的类），你可以将它分组为1个调用，用空格分隔类：

$(".primary-color").removeClass("two three four five");

Answer 2

你可以使用attr方法，

$(".xxx").attr("class","newclass");

Answer 3

你可以这样做

http://jsfiddle.net/lollero/ZUJUB/

$(document).ready(function() {
    $(".home, .services, .pricing, .special-thing, .contact").on("click", function() {

        $(".primary-color")
            // Remove all classes
            .removeClass()
            // Put back .primary-color class + the clicked elements class with the added prefix "pm_".
            .addClass('primary-color pm_' + $(this).attr('class') );       
    });
});

CSS：

.primary-color {
    width: 100px;
    height: 100px;
    border: 1px solid #e1e1e1;

}


.pm_services { background: red; }
.pm_home { background: green; }

HTML：

<div class="services">services</div>
<div class="home">home</div>

<div class="primary-color">Primary-color</div>

或类似的东西：

http://jsfiddle.net/lollero/ZUJUB/1/

这符合OP的结构：http://jsfiddle.net/lollero/EXq83/5/

jQuery的：

$(document).ready(function() {
    $("#buttons > div").on("click", function() {

        $(".primary-color")
            // Remove all classes
            .removeClass()
            // Put back .primary-color class + the clicked elements index with the added prefix "pm_".
            .addClass('primary-color pm_' + ( $(this).index() + 1 ) );       
    });
});

CSS：

.primary-color {
    width: 100px;
    height: 100px;
    border: 1px solid #e1e1e1;

}


.pm_1 { background: red; }
.pm_2 { background: green; }

HTML：

<div id="buttons">
    <div class="services">services</div>
    <div class="home">home</div>
</div>

<div class="primary-color">Primary-color</div>

Answer 4

您可以使用不带参数的removeClass()删除所有类别见：http://api.jquery.com/removeClass/

$(".primary-color").removeClass();

或使用以空格分隔的表示法来删除指定的类：

$(".primary-color").removeClass('one two');

或按attr()设置全新的类属性：

$(".primary-color").attr('class','one two');

Answer 5

这应该有效：

$(".home").click(function() {
   $(".primary-color").removeClass().addClass("one");          
});

Answer 6

您可以通过

删除元素中的所有类

$("#item").removeClass();

调用不带参数的removeClass将删除所有项目的类。

在执行addClass之前执行此操作，您的代码将会减少

Answer 7

我相信这就是你要找的东西。您应该只设置class属性，而不是添加和减去。当然，如果你要保留哪些课程，你也可以设置这些课程，但如果这不合适，你应该考虑完全以另一种方式进行。

$(".home").click(function() {
    $(".primary-color").attr("class", "one");
});

Answer 8

可以应用很多收缩。在不知道代码细节的情况下，很难进行任何进一步的更改。

$(".home, .contact, .special-thing, .pricing, .services").click(function() {
  $(".primary-color")
    .addClass("one")
    .removeClass("two three four five");          
});

Answer 9

8 年后...

我想我会使用数据属性 - 然后将其切换出来，而不是添加和删除类。

<body data-theme='punk'> 之类的。

https://codepen.io/sheriffderek/pen/34c8b5540b34c8ee9aedec604bbd5f59 & 你也可以使用浏览器的 localStorage 来保存选择:)

// I'd use body... but for this
var context = document.querySelector('main');

function setTheme(name) {
  context.dataset.theme = name;
}

setTheme('default');


// https://gomakethings.com/why-is-javascript-event-delegation-better-than-attaching-events-to-each-element/
document.addEventListener('click', function(event) {
  
  setTheme(event.target.dataset.themeOption);
  
});

main[data-theme='default'] {
  background-color: lightgray;
}

main[data-theme='punk'] {
  background-color: #FF0066;
}

main[data-theme='corperate'] {
  background-color: white;
  color: purple;
}

<main data-theme='default'>

  <button data-theme-option='default'>Default</button>
  <button data-theme-option='punk'>Punk</button>
  <button data-theme-option='corperate'>Corperate</button>

  <h1>Theme changer thingy</h1>

</main>

jQuery添加类并删除所有其他类

9 个答案: