Question

我正在制作一个画廊，在那个画廊中，会有div包装的图像。在jQuery中，我可以将这些div称为：

var card = $('.card');

此卡变量现在将包含具有'card'类的所有元素。现在，我想要发生的是每当我点击“卡片”时，它会抓住卡片的实例（我正在考虑通过获取其索引）并尽可能以面向对象的方式做一些事情（虽然我从来没有太多的经验）

Answer 1

您可以使用简单的this对象：

https://codepen.io/bra1N/pen/ERXPJw

＆＃13;

$('.card').on("click",function() { 
    $(this).css('background', 'red'); 
});

＆＃13;

.card {
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">A</div>
<div class="card">B</div>
<div class="card">C</div>

＆＃13;

Answer 2

以下是您可以做的事情：

虚拟HTML：

<div class="card">A</div>
<div class="card">B</div>
<div class="card">C</div>

jQuery需要：

$('.card').click(function() {
    alert($(this).text());
});

以下是jsfiddle支持此答案的链接。

＆＃13;

$('.card').click(function() {
  alert($(this).text());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">A</div>
<div class="card">B</div>
<div class="card">C</div>

＆＃13;

单击Jquery从数组中获取元素的索引

2 个答案: