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

당신은 당신의 사업부에 데이터를 유지하는 속성을 사용할 수 있습니다.

$(".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>