jQueryで特定のクラスのdivがあるかどうかを確認してから別のクラスの値を変更する

Question

私が書いているコードはアイコンを選択したアプリケーションのためのもので、簡単にコピーして別のプロジェクトに使用できます。 $（this）セレクタに問題があります。私は "グリフホルダー"クラスを持ついくつかのdivを持っていますが、私はどちらかを押しても問題はありません、それは常に "copy_text" divの値を同じクラス、最初のものに変更します。私はそれを私が押したdivに変更したい。

私が持っているHTMLは次のとおりです。私は現在持っている

<div id="copy_text">Select icon</div> 
<div class="glyph-holder"> 
    <div class="glyph"> 
     <div class="icon-flip-horizontal"></div> 
    </div> 
    <div class="beschrijving-bij-glyph"> 
     icon-flip-horizontal 
    </div> 
</div> 

javascriptのはこれです：has()で

$(document).ready(function(){ 

    var displayText = "Empty"; 

    $(".glyph-holder").click(function(){ 

     if($(this).has("icon-flip-horizontal")){ 
      displayText = "icon-flip-horizontal"; 
     }else if($(this).has("icon-flip-vertical")){ 
      displayText = "icon-flip-vertical"; 
     } 

     $("#copy_text").text(displayText); 
    }); 
}); 

Answer 1

あなたのセレクタは、クラスの.接頭辞が含まれていません。また、結果のjQueryオブジェクトのlengthプロパティをチェックする必要があります。これを試してみてください：

var displayText = "Empty"; 
 

 
$(".glyph-holder").click(function() { 
 
    if ($(this).has(".icon-flip-horizontal").length) { 
 
    displayText = "icon-flip-horizontal"; 
 
    } else if ($(this).has(".icon-flip-vertical").length) { 
 
    displayText = "icon-flip-vertical"; 
 
    } 
 
    $("#copy_text").text(displayText); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="copy_text">Select icon</div> 
 
<div class="glyph-holder"> 
 
    <div class="glyph"> 
 
    <div class="icon-flip-horizontal"></div> 
 
    </div> 
 
    <div class="beschrijving-bij-glyph"> 
 
    icon-flip-horizontal 
 
    </div> 
 
</div>

Answer 2

あなたは現在hasがクラスを探していることを指定していない、また.has()はjQueryオブジェクトを返すので、.lengthは、要素の数をテストするために使用する必要があります。代わりにこれを試してください。それは、クラスを参照していますので、

$(document).ready(function(){ 

    var displayText = "Empty"; 

    $(".glyph-holder").click(function(){ 

     if($(this).has(".icon-flip-horizontal").length){ 
      displayText = "icon-flip-horizontal"; 
     }else if($(this).has(".icon-flip-vertical").length){ 
      displayText = "icon-flip-vertical"; 
     } 

     $("#copy_text").text(displayText); 
    }); 
}); 

注意は、.has(".icon-flip-horizontal")で.が重要です。

Answer 3

divをidにターゲティングするので、1つのdivのみをターゲティングします。 prev機能を使用してdivでcopy_text divを取得できます。 $（ドキュメント）.ready（関数（）{

var displayText = "Empty"; 

$(".glyph-holder").click(function(){ 

    if($(this).has(".icon-flip-horizontal")){ 
     displayText = "icon-flip-horizontal"; 
    }else if($(this).has(".icon-flip-vertical")){ 
     displayText = "icon-flip-vertical"; 
    } 

    $(this).prev().text(displayText); 
    }); 
});