单击计数器Bootstrap carousel按钮
单击计数器Bootstrap carousel按钮
提问于 2021-08-12 13:53:44
不幸的是，这是一个非常愚蠢的问题。但是，我想不出如何让点击计数器按下Bootstrap carousel按钮。问题出在上一个和下一个图标的span元素上。
按钮计数器不计数对可纠正的span元素的点击。
$('button').click(function(btn) {
btn.target.dataset.click_counter_hidden = (+btn.target.dataset.click_counter_hidden || 0) + 1;
$('#click_search_left').val($('button[data-id="slider_left"]').attr("data-click_counter_hidden") || 0);
$('#click_search_right').val($('button[data-id="slider_right"]').attr("data-click_counter_hidden") || 0);<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
<div class=class="carousel-item active">
<div class="carousel-item" id="example1">
<img id="example_1" src="https://picsum.photos/200/300" class="d-block w-100" alt="example_1">
</div>
<div class="carousel-item" id="example2">
<img id="example_2" src="https://picsum.photos/200/300" class="d-block w-100" alt="example_2">
</div>
<div class="carousel-item" id="example3">
<img id="example_3" src="https://picsum.photos/200/300" class="d-block w-100" alt="example_1">
</div>
</div>
<button type="button" id='slider_left' data-id="slider_left" class="carousel-control-prev tracked_element" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" id="prev_icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button type="button" id='slider_right' data-id="slider_right" class="carousel-control-next tracked_element" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" id="next_icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<input type="hidden" name="click_search_left" id="click_search_left" value="0" />
<input type="hidden" name="click_search_right" id="click_search_right" value="0" />
Stack Overflow用户
回答已采纳
发布于 2021-08-12 14:38:39
将您的计数器数据属性添加到这两个按钮(这只是为了帮助初始化)。
<button data-click_counter_hidden="0">检查单击事件是否处于打开状态。如果不是，它一定是子span元素，所以获取父元素(按钮)。
$('button').on('click', function(e){
$t = $(e.target);
if (!$t.is('button')){
$t = $t.parent();
}
clicks = parseInt($t.data('click_counter_hidden')) + 1;
$t.data('click_counter_hidden', clicks);
// display counter value elsewhere if needed
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68758784
复制相关文章
相似问题
腾讯云开发者
