foreachでクリックイベントのデータを渡す

Question

これは私のコードです。 jQueryを使用してクリックイベントに名前とURLを渡すにはどうすればよいですか？

<?php foreach ($call_array ['events'] as $data) { ?> 
    <div class="card"> 
    <div class="card-header"> 
     <?php echo '<h2 class="card-title">'. $data ['name']['text'] .'</h2>'; ?> 
    </div> 
    <div class="card-footer"> 
     <a href="<?php echo $data['event_url'];?>" role="button">Go Now</a> 
    </div> 
    </div> 
<?php } ?> 

Answer 1

あなたのdiv要素内のデータを保持するために属性を使用することができます。

$(".card").on("click", function(e) { 
    $(this).attr("data-url"); //contains url of card clicked 
    $(this).attr("data-name"); //contains name of card clicked 
}); 

Answer 2

clickイベントに値を渡す代わりに、イベントハンドラ内のDOMから値を読み取ることができます。このような何か：

$('.card a').click(function(e) { 
 
    e.preventDefault(); 
 
    var name = $(this).closest('.card').find('.card-title').text(); 
 
    var url = $(this).attr('href'); 
 
    
 
    console.log(name, url); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="card"> 
 
    <div class="card-header"> 
 
    <h2 class="card-title">Name A</h2> 
 
    </div> 
 
    <div class="card-footer"> 
 
    <a href="#event-url1" role="button">Go Now</a> 
 
    </div> 
 
</div> 
 
<div class="card"> 
 
    <div class="card-header"> 
 
    <h2 class="card-title">Name B</h2> 
 
    </div> 
 
    <div class="card-footer"> 
 
    <a href="#event-url2" role="button">Go Now</a> 
 
    </div> 
 
</div>