特定のクラス値のみを印刷する方法

Question

ビューに3つのdivがあります。すべてのdivには一意のsingle_valueがあります。だから私はそのいずれかをクリックすると、そのデータ値を警告する必要があります。そのために私は次のスクリプトを使用しました

しかし、問題は私がクリックしたdivの最初の値を取得するだけです。クリックした特定のdivのみを印刷するにはどうすればいいですか？ここで

ビューです：

<div class="col-md-2 col-sm-4 col-xs-12"> 
    <div class="single_school" data-value="1"> 
     <div class="selection_area choosen_school"> 
      <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 
     </div>   
     <div class="school_info"> 
      <p class="school_name">ABC</p> 
     </div> 
    </div> 
</div> 
<div class="col-md-2 col-sm-4 col-xs-12"> 
    <div class="single_school" data-value="2"> 
     <div class="selection_area choosen_school"> 
      <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 
     </div>   
     <div class="school_info"> 
      <p class="school_name">XYZ</p> 
     </div> 
    </div> 
</div> 
<div class="col-md-2 col-sm-4 col-xs-12"> 
    <div class="single_school" data-value="3"> 
     <div class="selection_area choosen_school"> 
      <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 
     </div>   
     <div class="school_info"> 
      <p class="school_name">PQR</p> 
     </div> 
    </div> 
</div> 

Answer 1

$(document).on('click','.single_school',function(){ 
    var school = $(this).attr('data-value'); 
    alert(school) 
    }); 

Answer 2

あなたが要素をクリックしたときに値を取得するためにjQueryのdata()を使用する必要があります。第2に、$(this)を使用してクラス名ではなく現在の要素値を取得する必要があります。コードでは、$(".single_school")を使用しているため、常に1つの結果が得られます。これは$(this)に置き換えてください：

`single_food`ある

$(document).on('click', '.single_school', function() { 
 
    var school = $(this).data('value'); 
 
    alert(school) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-2 col-sm-4 col-xs-12"> 
 
    <div class="single_school" data-value="1"> 
 
    <div class="selection_area choosen_school"> 
 
     <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 
 
    </div> 
 
    <div class="food_info"> 
 
     <p class="school_name">ABC</p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="col-md-2 col-sm-4 col-xs-12"> 
 
    <div class="single_school" data-value="2"> 
 
    <div class="selection_area choosen_school"> 
 
     <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 
 
    </div> 
 
    <div class="food_info"> 
 
     <p class="school_name">XYZ</p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="col-md-2 col-sm-4 col-xs-12"> 
 
    <div class="single_school" data-value="3"> 
 
    <div class="selection_area choosen_school"> 
 
     <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 
 
    </div> 
 
    <div class="food_info"> 
 
     <p class="school_name">PQR</p> 
 
    </div> 
 
    </div> 
 
</div>