英文:
Click On Specific Child Buttons Using jQuery
问题
我正在寻找当我点击每个图像时，导航到滑块元素内的特定滑块。活动幻灯片具有class="active"，因此我只需要能够定位特定的按钮并添加class。
<div>
<img src="#" id="image_slide_1">
<img src="#" id="image_slide_2">
<img src="#" id="image_slide_3">
<img src="#" id="image_slide_4">
</div>
<div class="pf-slider-nav">
<button type="button" class="active"></button> //幻灯片1按钮
<button type="button"></button> //幻灯片2按钮
<button type="button"></button> //幻灯片3按钮
<button type="button"></button> //幻灯片4按钮
</div>
我尝试了类似以下的代码：
$('#image_slide_4').on('click', function() {
$('.pf-slider-nav button:nth-child(3)').addClass('active').click();
});
英文:
I'm looking for when I click on each image, navigate to a specific slider inside the slider element. The active slide have the class="active" so I just need to be able to target the specific button and add the class.
<div>
<img src="#" id="image_slide_1">
<img src="#" id="image_slide_2">
<img src="#" id="image_slide_3">
<img src="#" id="image_slide_4">
</div>
<div class="pf-slider-nav">
<button type="button" class="active"></button> //Slide 1 Button
<button type="button"></button> //Slide 2 Button
<button type="button"></button> //Slide 3 Button
<button type="button"></button> //Slide 4 Button
</div>
I was trying something like:
$('#image_slide_4').on('click', function() {
$('.pf-slider-nav button:nth-child(3)').addClass('active').click();
});
答案1
得分: 1
-
在点击事件上使用通配符作为ID。
$("[id^=image_slide]")
id以image_slide开头 -
单击图像时，捕获ID，分割并获取最后一个值。
var ind = $(this).attr('id').split('_').pop();
-
删除按钮上以前添加的所有类，并借助步骤2找到按钮的索引并添加类。
var _acBtn = $(".pf-slider-nav > button");
_acBtn.removeClass("active"); // 删除以前的活动类
_acBtn.eq(ind - 1).addClass("active"); // -1 因为索引从0开始
工作示例：
$("[id^=image_slide]").on("click", function() {
var ind = $(this).attr('id').split('_').pop();
var _acBtn = $(".pf-slider-nav > button");
_acBtn.removeClass("active"); // 删除以前的活动类
_acBtn.eq(ind - 1).addClass("active"); // -1 因为索引从0开始
});
.active {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<img src="#" id="image_slide_1">
<img src="#" id="image_slide_2">
<img src="#" id="image_slide_3">
<img src="#" id="image_slide_4">
</div>
<div class="pf-slider-nav">
<button type="button" class="active"></button> //Slide 1按钮
<button type="button"></button> //Slide 2按钮
<button type="button"></button> //Slide 3按钮
<button type="button"></button> //Slide 4按钮
</div>
英文:
-
Use wild card for id on click event.
$("[id^=image_slide]")idstart withimage_slide -
When click on image , catch id, split and and get last value.
var ind = $(this).attr('id').split('_').pop(); -
Delete all previous added class on button and help of step 2 find index of button and add class .
var _acBtn = $(".pf-slider-nav > button"); _acBtn.removeClass("active"); //Remove previous active class _acBtn.eq(ind - 1).addClass("active"); // -1 because index start with 0
Working example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$("[id^=image_slide]").on("click", function() {
var ind = $(this).attr('id').split('_').pop();
var _acBtn = $(".pf-slider-nav > button");
_acBtn.removeClass("active"); //Remove previous active class
_acBtn.eq(ind - 1).addClass("active"); // -1 because index start with 0
});
<!-- language: lang-css -->
.active {
background-color: red;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<img src="#" id="image_slide_1">
<img src="#" id="image_slide_2">
<img src="#" id="image_slide_3">
<img src="#" id="image_slide_4">
</div>
<div class="pf-slider-nav">
<button type="button" class="active"></button> //Slide 1 Button
<button type="button"></button> //Slide 2 Button
<button type="button"></button> //Slide 3 Button
<button type="button"></button> //Slide 4 Button
</div>
<!-- end snippet -->
答案2
得分: 0
这是Vanilla JS中的另一种解决方案：
<div>
<img src="#" id="image_slide_1">
<img src="#" id="image_slide_2">
<img src="#" id="image_slide_3">
<img src="#" id="image_slide_4">
</div>
<div class="pf-slider-nav">
<button type="button" class="active">1</button> <!-- Slide 1 Button -->
<button type="button">2</button> <!-- Slide 2 Button -->
<button type="button">3</button> <!-- Slide 3 Button -->
<button type="button">4</button> <!-- Slide 4 Button -->
</div>
const btns = document.querySelectorAll("button");
document.querySelector("div")
.querySelectorAll("img").forEach((el, i) => el.onclick = () => btns.forEach((b, j) => b.classList.toggle("active", j == i)));
.active {
background-color: red;
}
请注意，这只是HTML、JavaScript和CSS代码的翻译部分。
英文:
Here is another solution in Vanilla JS:
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-js -->
const btns=document.querySelectorAll("button");
document.querySelector("div")
.querySelectorAll("img").forEach((el,i)=>el.onclick=()=>btns.forEach((b,j)=>b.classList.toggle("active",j==i)))
<!-- language: lang-css -->
.active {
background-color: red;
}
<!-- language: lang-html -->
<div>
<img src="#" id="image_slide_1">
<img src="#" id="image_slide_2">
<img src="#" id="image_slide_3">
<img src="#" id="image_slide_4">
</div>
<div class="pf-slider-nav">
<button type="button" class="active">1</button> //Slide 1 Button
<button type="button">2</button> //Slide 2 Button
<button type="button">3</button> //Slide 3 Button
<button type="button">4</button> //Slide 4 Button
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论