Question

这是我的代码。如何使用jQuery在click事件上传递名称和url？

{{1}}

Answer 1

您可以使用属性将数据保存在div中。

<div class="card" data-name="<?php echo $data['name'];?>" data-url="<?php echo $data['event_url'];?>">
    <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>

然后使用Jquery以这种方式访问它：

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

您可以在事件处理程序中从DOM中读取它们，而不是将值传递给click事件。像这样：

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

传递有关foreach生成的div上的click事件的数据

2 个答案: