[英]How to add Prev and next buttons to change on outer divs
I have this sample navigation that I'm trying to create.我有这个我正在尝试创建的示例导航。 What I want to achieve is when you clicked on
prev
or next
class. The active
class will be added to map-inr
and the scale_text
will also be added to the global_map_location
class. I believe that only the eq()
function will be used in this part.我想要实现的是当你点击上一个或
next
prev
时。 active
的class将被添加到map-inr
, scale_text
也将被添加到global_map_location
class。我相信只有eq()
function会被使用这部分。
Here's my js Code:这是我的js代码:
// Open Popup $(".map-inr").on("click", function () { let myIndex = $(this).closest(".global-map").index() - 1; $('.map-inr').removeClass('active'); $(this).addClass('active'); $('.global_map_location').removeClass('scale_text'); $(this).closest(".global-map").find('.global_map_location').addClass('scale_text'); if ($(".map-item.is--show").length) { $(".map-item").removeClass("is--show"); setTimeout(function () { $(".map-item").eq(myIndex).addClass("is--show"); }, 600); } else { $(".map-item").eq(myIndex).addClass("is--show"); } }); //Next function $('.next').click(function(){ if ($('.is--show').next('.map-item').length) { $('.is--show').removeClass('is--show').next('.map-item').addClass('is--show'); } }); //Prev function $('.prev').click(function(){ if ($('.is--show').prev('.map-item').length) { $('.is--show').removeClass('is--show').prev('.map-item').addClass('is--show'); } });
.global-map { display: inline-block; vertical-align: top; margin-right: 20px; margin-bottom: 20px; }.map-inr { background: red; width: 150px; height: 150px; cursor: pointer; }.map-inr.active { background: yellow; }.global_map_location.scale_text { font-weight: 600; }.contain { width: 100%; max-width: 1000px; margin: 50px auto 0; padding: 0; }.map-item { display: inline-block; vertical-align: top; padding: 20px; border-radius: 20px; text-align: center; }.map-item.is--show { background: yellow; }.slider-arrow-wrapper { margin-bottom: 20px; }.slider-arrow-wrapper.prev, .slider-arrow-wrapper.next { display: inline-block; vertical-align: top; text-decoration: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="global-map"> <div class="map-inr active"></div> <p class="global_map_location scale_text">map1</p> </div> <div class="global-map"> <div class="map-inr"></div> <p class="global_map_location">map2</p> </div> <div class="global-map"> <div class="map-inr"></div> <p class="global_map_location">map3</p> </div> <div class="contain"> <div class="map-item is--show"> <div class="slider-arrow-wrapper"> <a href="#" class="prev">prev</a> <a href="#" class="next">next</a> </div> 1 </div> <div class="map-item"> <div class="slider-arrow-wrapper"> <a href="#" class="prev">prev</a> <a href="#" class="next">next</a> </div> 2</div> <div class="map-item"> <div class="slider-arrow-wrapper"> <a href="#" class="prev">prev</a> <a href="#" class="next">next</a> </div> 3</div> </div>
I have tried this on next button:我在下一个按钮上试过这个:
//Next function
$('.next').click(function(){
let nextIndex = $(this).closest(".map-item").index() + 1;
console.log("This next is " + nextIndex);
$(".global-map").eq(nextIndex).find('.map-inr').addClass("active");
$(".global-map").eq(nextIndex).find('.global_map_location').addClass("scale_text");
if ($('.is--show').next('.map-item').length) {
$('.is--show').removeClass('is--show')
.next('.map-item')
.addClass('is--show');
}
});
But it just keeps adding classes to next div.但它只是不断地向下一个 div 添加类。 How to remove the classes from prev sections/divs?
如何从上一个部分/div 中删除类? Is there any proper way to do it?
有什么正确的方法吗?
When user click on Prev and Next anchor tag which have Yellow background then only it should work.当用户单击具有黄色背景的 Prev 和 Next 锚标记时,只有它应该起作用。 It is not feasible solution to make all the prev and next anchor tag click work.
让所有的上一个和下一个锚标签点击工作是不可行的解决方案。 Only yellow background prev and next click should work.
只有黄色背景的 prev 和 next click 应该有效。
Below is the code which match up the scenario which is explained above and also it will give you the user friendly standard view:下面是与上面解释的场景相匹配的代码,它还会为您提供用户友好的标准视图:
$(".next").on('click', function(e) {
e.preventDefault();
if($(this).closest(".map-item.is--show").next().length > 0)
{
$(".contain .is--show").removeClass('is--show').next().addClass("is--show");
$(".map-inr.active").removeClass('active').parent().next().children(".map-inr").addClass("active");
}
});
$(".prev").on('click', function(e) {
e.preventDefault();
if($(this).closest(".map-item.is--show").prev().length > 0)
{
$(".contain .is--show").removeClass('is--show').prev().addClass("is--show");
$(".map-inr.active").removeClass('active').parent().prev().children(".map-inr").addClass("active");
}
Please replace it with your prev and next click jQuery.请将其替换为您的上一个,然后单击 jQuery。
Let me know if you have any issues or modification request.如果您有任何问题或修改请求,请告诉我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.