下表示相同
我正在尝试使用相同的方法跟踪两个图像上的点击次数。以下是我为实现这一目标而编写的代码:
$(document).ready(function () {
var $foo= $('#foo'),
$bar= $('#bar'),
fooCount1 = 0,
barCount2 = 0,
count;
function elemClicked (e) {
count = e.data.count;
count++;
console.log(count);
$(this).siblings('.counter').html(count);
}
$foo.click({count: fooCount1 }, elemClicked );
$bar.click({count : barCount2 }, elemClicked );
})
这就是HTML的样子:
<div class="elems">
<img class="pic" src="/path/img1.jpg" id="foo" alt="foo">
<div class="counter"></div>
</div>
<div class="elems">
<img class="pic" src="/path/img2.jpg" id="bar" alt="bar">
<div class="counter"></div>
</div>
计数器不会每次单击都递增。如何在每次点击时增加计数器?还有,有没有一种更优雅的方式来实现我在这里尝试的目标?
$(".elems .pic").click(function() {
var incClick = typeof($(this).attr("d-click"))=="undefined" ? 0 : $(this).attr("d-click");
incClick = parseInt(incClick);
incClick++;
$(this).attr("d-click", incClick);
$(this).next().html(incClick);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elems">
<img class="pic" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" id="foo" alt="foo">
<div class="counter"></div>
</div>
<div class="elems">
<img class="pic" src="http://placehold.it/350x150" id="bar" alt="bar">
<div class="counter"></div>
</div>
上面是非常简单的代码,通过它可以轻松地触发点击计数。
每次点击图片时,当前图片都会保存一个名为d-click
的属性,该属性的值会递增。并且在CCD_ 2