動的クラス名を見つける人

Question

動的クラス名を見つけようとしていますが、他のリンクもクリックすると最初のdiv名しか見つかりません。

JSコード： -

$(document).ready(function(){ 
$('#foot-map .maplink a').on('click', function(){ 
    var mapFlag = $(this).closest('#foot-map').find('.map-area div').attr('class'); 

    alert(mapFlag); 

}); 

}); 

このリンクでの完全なコードを見つけてください： - jQueryの中に複数の要素があるので、あなたが最初のdivの値を参照してくださいJsfiddle

Answer 1

理由がありますそのコレクション上のattr()を呼び出すと、最初のコレクションのみが返されます。

$(document).ready(function() { 
 
    $('#foot-map .maplink a').on('click', function(e) { 
 
    e.preventDefault(); 
 
    var target = $(this).data('target'); 
 
    var mapFlag = $(this).closest('#foot-map').find('.map-area .' + target).attr('class'); 
 
    alert(mapFlag); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="foot-map"> 
 
    <ul class="maplink"> 
 
    <li><a id="uktabfoot" data-target="uk" class="active" href="#">UK</a></li> 
 
    <li><a id="maltatabfoot" data-target="malta" href="#">MALTA</a></li> 
 
    <li><a id="indiatabfoot" data-target="india" href="#">INDIA</a></li> 
 
    </ul> 
 
    <div class="map-area"> 
 
    <div class="uk map-hover"> 
 
     <a href="#"><b></b></a> 
 
     <span class="flag">United Kingdom</span> 
 
    </div> 
 
    <div class="malta"> 
 
     <a href="¢"><b></b></a> 
 
     <span class="flag">Malta</span> 
 
    </div> 
 
    <div class="india"> 
 
     <a href="#"><b></b></a> 
 
     <span class="flag">India</span> 
 
    </div> 
 
    <div class="china"> 
 
     <a href="#"><b></b></a> 
 
     <span class="flag">China</span> 
 
    </div> 
 
    </div> 
 
</div>

：あなたは、 aに関連する特定の .map-area div要素を標的とするために使用することができます <a>要素にこのような何かを追加 data属性を置くことができる必要なものを達成するために

をhref属性に配置することは理想的ではありません。要素をクリックしてURLに影響を与えたくない場合は、hrefを#にして、return falseを使用してイベントを防止するか、または発生イベントでを呼び出すことを推奨します。