6

だから私はいくつかのナビアンカーを持っています。これらがクリックされたときに、ページ上のいくつかの基本的な配色を変更したいと考えています。これを行うことができた唯一の方法は、以下のコードを使用することです。

それは問題なく動作しますが、もっとエレガントな方法があると思わずにはいられません。クラスを一挙に取り除くことが可能かどうか、誰か知っていますか?

編集:これはもっと明確だったかもしれません。元のクラスをなくしたくありませんでした。jQueryで追加されたクラスだけだと思います。混乱させて申し訳ありません。

ありがとう。

編集:このフィドルを参照してください

すべてのソリューションを実装しようとしました。

「{"エラー": "POST リクエストを使用してください"}" が表示されますが...

編集:これは href="?" が原因でした vs. 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");     
    });
4

9 に答える 9

10

あなたはこのようにすることができます

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>
​
于 2012-12-11T09:25:32.847 に答える
6

あなたはattrメソッドを使うことができます、

$(".xxx").attr("class","newclass");
于 2012-12-11T08:58:23.650 に答える
6

(クラス$(".primary-color").removeClass()を指定せずに)動作するはずです!

または、クラスを削除する(他の重要なクラスを残す)必要がある場合は、クラスをスペースで区切って1つの呼び出しにグループ化できます。

$(".primary-color").removeClass("two three four five");   
于 2012-12-11T08:58:41.903 に答える
4

これはうまくいくはずです:

$(".home").click(function() {
   $(".primary-color").removeClass().addClass("one");          
});
于 2012-12-11T09:13:58.650 に答える
4

removeClass()すべてのクラスを削除するには、パラメーターなしで使用できます。 http://api.jquery.com/removeClass/
を参照してください。

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

または、スペース区切りの表記を使用して、指定したクラスを削除します。

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

または、次の方法で完全に新しいクラス属性を設定しますattr()

$(".primary-color").attr('class','one two');
于 2012-12-11T09:00:54.353 に答える
2

次のようにすることで、要素からすべてのクラスを削除できます。

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

パラメータを指定せずにremoveClassを呼び出すと、アイテムのすべてのクラスが削除されます。

実行する前にこれを実行するaddClassと、コードが削減されます

于 2012-12-11T08:59:29.100 に答える
0

これがあなたが探しているものだと思います。足し算や引き算ではなく、単にクラス属性を設定する必要があります。確かに、保持するクラスがある場合は、それらを設定することもできますが、それが適切でない場合は、まったく別の方法で行うことを検討する必要があります。

$(".home").click(function() {
    $(".primary-color").attr("class", "one");
});
于 2012-12-11T08:59:23.480 に答える
0

多くのcontractiosnを適用することができます。コードの詳細を知らなければ、それ以上の変更を加えることは困難です。

$(".home, .contact, .special-thing, .pricing, .services").click(function() {
  $(".primary-color")
    .addClass("one")
    .removeClass("two three four five");          
});
于 2012-12-11T09:03:38.100 に答える
0

それから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>

于 2021-01-07T17:56:19.167 に答える