web-dev-qa-db-ja.com

Jquery要素にxで始まるクラスがある場合、addClassは使用しないでください

私は間違いなく初心者なので、ごみのコーディングについてお詫びします！自分で設定した実践プロジェクト用に次のJqueryを作成しました。

Divをクリックすると、クラス「in_answerbox1」が追加され、クラス「answerbox_letter1」が追加されたクローンdivが回答ボックスに作成されます。

最終的に、グリッド（またはテーブルのセル）には多くのdivが存在し、特定のdivをクリックすると、フェードアウトして回答ボックスに表示されるように見えます。次に、回答ボックス内のものをクリックすると、グリッド内の関連するdivが再表示され、クローンが回答ボックスから削除されます。

ただし、ここでクラスを追加したいのは、クリックしたものがまだ回答ボックスにない場合のみです。つまり、オリジナルまたはクローンのいずれかに「回答ボックス」を含むクラスがある場合です。

私はそれがうまくいかないことを知って以下を書きましたが、それは私がより良いことを望んでいることを説明するかもしれません。

var n = 0;

$('#box').click(function(){

    if(!$(this).hasClass('*[class^="answerbox"]')) {

    $(this).addClass('in_answerbox' + (n+ 1) );

    $(this).clone().appendTo('#answerbox').addClass('answerbox_letter' + (n + 1));
    n = (n + 1);

}


});

助言がありますか？

jqueryaddclass
17
Truvia

問題はif条件にあると思います：

_if(!$(this).hasClass('[class^="answerbox"]')) {
_

これを試して ：

_if(!$(this).is('[class*="answerbox"]')) {
    //Finds element with no answerbox class
} else {
    //The element has already an answerbox class
}
_

toggleClass および is jquery docsをご覧ください。

これを見る ライブフィドルの例 。

ちょっとしたヒント：n = (n + 1)の代わりに_n++_ :)を実行できます。

編集：

質問をもう一度読んだ後、私は完全な作業スクリプトを行いました：

Htmlが次のようであると仮定します：

_<div id="box">
    <p>Answer1</p>
    <p>Answer2</p>
    <p>Answer3</p>
</div>

<div id="answerbox">

</div>
_

jQuery：

_var n = 0;

$('#box p').on('click',function(e) {
    e.preventDefault();
    if(!$(this).is('[class*="answerbox"]')) {
        n++;
        $(this).addClass('in_answerbox' + n );
        $(this).clone().appendTo('#answerbox').addClass('answerbox_letter' + n); 
    }
});
_

これを見てください ここの例 。

data-attributes を使用することを検討する必要があります。そうすることで、classesよりも信頼性が高まります。

クラス属性がWordで始まる場合にのみセレクターを一致させる場合は、_[class^="Word"]_が必要になります。 _*_ただし、クラス属性全体を検索します。ただし、_[class^="Word"]_は_<div class="test Word">_と一致しません ここを参照 。

36
soyuka

.is()の代わりに.hasClass()を使用してください。前者はCSSセレクターで使用できますが、後者はクラス名を「固定」文字列としてのみ使用できます。

if(!$(this).is('[class^="answerbox"]'))

注：これは、要素にクラスが1つしかない場合にのみ機能します

4
devnull69

複数のクラス名で機能するものが必要な場合は、これを確認してください

var theClasses = $(this).attr('class').split(" ");
var i=0;
var found = false;
while(i<theClasses.length && !found) {
   if(theClasses[i].indexOf('answerbox') == 0) {   // starts with answerbox
      found = true;
   }
   i++;
}
if(!found) {
   // the current element does not have a class starting with answerbox
}
2
devnull69

要素の同じ要素に複数のクラスがある場合、他の回答は機能しません。そのように選択する必要があります：

if ( $(this).is('[class^="bleh_"], [class*=" bleh_"]') ) {

    // Return true if element has class that starts with "bleh_"

    // Note: The second argument has a space before 'bleh_'

}
1
Jack Nicholson