web-dev-qa-db-ja.com

jquerytoggleClassが機能しない

リンクが2つあり、リンクをクリックするとクラスを切り替えたい。

私のリンクは

<a id="single" class="btn" >
<a id="double" class="btn active">

だから私はクラスをbtn to btn activeから変更したい私はこのコードを持っています

$(document).ready(function(){
    $('a.btn').click(function(){
       $(this).removeClass('focus active');
       $(this).removeClass('active');
       $(this).toggleClass("btn active");
   });
});

私のaccpliceationの他のJavaScriptでもこれらのクラスが追加されているため、このコードで試しました。

これは、次のような場合に正常に機能します

<a id="single" class="btn" >
<a id="double" class="btn active">

しかし、私の最初のボタンが次のようにアクティブなとき

<a id="single" class="btn active" >
<a id="double" class="btn">

これは機能しませんでしたが、ダブルをクリックすると次のようにクラスが表示されます

<a id="single" class="btn active" >
<a id="double" class="active">

これは奇妙なことです。<a id="double"がアクティブな場合は機能しますが、<a id="single"がアクティブな場合は機能しませんでした。

私がしたいのは、任意のリンクをクリックしたときです。1。古いリンクからすべてのクラスを削除し、古いリンククラス「btn」を指定します。2。クリックしたリンクからすべてのクラスを削除し、クラス「btnactive」を指定します。

これを修正する方法は？

javascriptjquerytoggleclass
3
user3412718

現在クリックされているリンクのクラスを切り替える必要があります。その前に、次のように、すべてのリンクのアクティブクラスとフォーカスクラスを削除します。

$('a.btn').click(function(){
  $("a.btn").removeClass("active focus");
  $(this).toggleClass("active");
});
a.active {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="single" class="btn active">single</a>
<a id="double" class="btn">double</a>
7
xxxmatko

基本的な切り替え

次のコードは、ボタンのクラスactiveを切り替えます。つまり、存在しない場合はクラスを追加し、存在する場合は削除します。

$(document).ready(function(){
    $('a.btn').click(function(){
       $(this).toggleClass("active");
   });
});

デモ

$(document).ready(function(){
    $('a.btn').click(function(){
       $(this).toggleClass("active");
   });
});
body {
    margin: 0;
}

.btn {
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
    display: inline-block;
    background: #99f;
    cursor: pointer;
}

.btn.active {
    background: #00f;
    color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a id="single" class="btn">Button 1</a>
<a id="double" class="btn active">Button 2</a>
<a id="trupple" class="btn">Button 3</a>
<a id="quadruple" class="btn">Button 4</a>

アクティブなボタンを1つだけ許可する

常にアクティブなボタンを1つだけにしたい場合は、すべてのボタンからクラスactiveを削除して、クリックしたボタンに追加する必要があります。

$(document).ready(function(){
    $('a.btn').click(function(){
       $('.btn').removeClass("active");
       $(this).addClass("active");
   });
});

デモ

$(document).ready(function(){
    $('a.btn').click(function(){
       $('.btn').removeClass("active");
       $(this).addClass("active");
   });
});
body {
    margin: 0;
}

.btn {
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
    display: inline-block;
    background: #99f;
    cursor: pointer;
}

.btn.active {
    background: #00f;
    color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a id="single" class="btn">Button 1</a>
<a id="double" class="btn active">Button 2</a>
<a id="tripple" class="btn">Button 3</a>
<a id="quadruple" class="btn">Button 4</a>
3
John Slegers

JQueryセレクターが問題である可能性があります。

クラス「btn」のすべてのアンカータグのクリックを検出しています。

_$('a.btn').click(function(){
_

しかし、次にクラス「btn」を削除します。今後のクリックをどのように検出できますか？回答：彼らはしません。

行に両方のクラスを指定する必要はないことに注意してください

_$(this).toggleClass("btn active");
_

本当にactiveクラスを切り替えたいだけのようですので、

_$(this).toggleClass("active");
_

また、いつでも追加/削除したいものを正確に指定するのが最も便利だと思います。つまり、addClass()ではなく、removeClass()とtoggleClass()のみを使用しようとしています。より多くのコードが必要ですが、より安全です。

2
gibberish

Jqueryコードを次のように変更してください：

$(document).ready(function(){
    $('a.btn').click(function(){
        $(this).toggleClass("btn btn active");
   });
});

これは私にとってはうまくいきます。お役に立てれば ：）

2
Hardipsinh Jadeja
$("a.btn").on("click", function() {
                        $(this).toggleClass("active");
                        $(this).siblings().toggleClass("active");
                });
1
song wang