所以我正在制作一个自定义jquery滑块，滑块工作得很好，但导航点由于某种原因不起作用，如果我点击一个导航点，相应的滑块应该可见，但它只是显示空白。
这是代码的重要部分，我根据滑块的数量添加点，以及在点上注册点击事件的位置：
$('.slider').each(function(){
$('.gran_slider_big_navegation_container').append('<span class="dot"></span>');
});
$('.dot').click(function(){
index = $(this).eq();
console.log(index);
$('.slider').removeClass('active_slider');
$('.slider').eq(index).addClass('active_slider');
show_index = index;
});
以下是滑块的完整代码，现在就是：
$(document).ready(function(){
var interval = 12000;
var sliders = $('.slider');
var dots = $('.dot');
var index = 0;
var show_index = 0;
$('.slider').eq(show_index).addClass('active_slider');
$('.dot').eq(show_index).addClass('active_dot');
console.log(show_index);
console.log(sliders.length);
setInterval(function() {
if(show_index == (sliders.length- 1)){
$('.slider').eq(show_index).removeClass('active_slider');
show_index = 0; // set it here
$('.slider').eq(show_index).addClass('active_slider');
$('.dot').removeClass('active_dot');
$('.dot').eq(show_index).addClass('active_dot');
console.log(show_index);
}
else{
$('.slider').eq(show_index).removeClass('active_slider');
show_index = show_index + 1; // set it here
$('.slider').eq(show_index).addClass('active_slider');
$('.dot').removeClass('active_dot');
$('.dot').eq(show_index).addClass('active_dot');
console.log(show_index);
}
}, interval);
$('.prev').click(function(){
console.log('clicked prev');
if(show_index == 0){
$('.slider').eq(show_index).removeClass('active_slider');
show_index = (sliders.length - 1);// set it here
$('.slider').eq(show_index).addClass('active_slider');
$('.dot').removeClass('active_dot');
$('.dot').eq(show_index).addClass('active_dot');
console.log(show_index);
}
else{
$('.slider').eq(show_index).removeClass('active_slider');
show_index = show_index - 1; // set it here
$('.slider').eq(show_index).addClass('active_slider');
$('.dot').removeClass('active_dot');
$('.dot').eq(show_index).addClass('active_dot');
console.log(show_index);
}
});
$('.next').click(function(){
console.log('clicked next');
if(show_index == (sliders.length- 1)){
$('.slider').eq(show_index).removeClass('active_slider');
show_index = 0; // set it here
$('.slider').eq(show_index).addClass('active_slider');
$('.dot').removeClass('active_dot');
$('.dot').eq(show_index).addClass('active_dot');
console.log(show_index);
}
else{
$('.slider').eq(show_index).removeClass('active_slider');
show_index = show_index + 1; // set it here
$('.slider').eq(show_index).addClass('active_slider');
$('.dot').removeClass('active_dot');
$('.dot').eq(show_index).addClass('active_dot');
console.log(show_index);
}
});
$('.slider').each(function(){
$('.gran_slider_big_navegation_container').append('<span class="dot"></span>');
});
$('.dot').click(function(){
index = $(this).eq();
console.log(index);
$('.slider').removeClass('active_slider');
$('.slider').eq(index).addClass('active_slider');
show_index = index;
});
});/*GRAN SLIDER START*/
.gran_slider_maincontainer{width:100%; height:100vh; display:flex; flex-direction:column; overflow:hidden;}
.gran_slider_big_container{width:100%; position:relative; height:90vh; overflow:hidden;}
.prev{cursor:pointer; position:absolute; left:20px; transition:all 1000ms ease; opacity:0; z-index:9999999999999999999999999999; top:50%; transform:translateY(-50%); font-size:20px; color:rgba(255,255,255,0.8);}
.next{cursor:pointer; position:absolute; right:20px; transition:all 1000ms ease; opacity:0; z-index:9999999999999999999999999999; top:50%; transform:translateY(-50%); font-size:20px; color:rgba(255,255,255,0.8);}
.gran_slider_big_navegation_container{width:auto; height:30px; display:flex; align-items:center; position:absolute; bottom:25px; right:50px; z-index:9999999999999999999999999999;}
.dot{width:15px; height:15px; background-color:rgba(0,0,0,0.7); transition: all 2000ms ease; margin:0px 6px; border-radius:50%; cursor:pointer;}
.gran_slider_big_container:hover .prev{opacity:1;}
.gran_slider_big_container:hover .next{opacity:1;}
.gran_slider_big_item_container{display:none; width:100%; height:100%; position:relative; overflow:hidden;}
.gran_slider_big_item_gradient_overlay{width:100%; height:100%; z-index:3; background-color:rgba(0,0,0,0.4); position:absolute; top:0px; left:0px;}
.gran_slider_big_item_image{width:100%; height:100%; z-index:2; background-size:cover;}
.gran_slider_big_item_texts_container{width:55%; height:auto; display:flex; flex-direction:column; padding:10px;}
.gran_slider_big_item_texts_title{font-size:45px; color:white; font-weight:600; margin-bottom:30px; text-shadow:5px 5px 10px rgba(0,0,0,1.0);}
.gran_slider_big_item_texts_description{font-size:30px; color:white; font-weight:600 margin-bottom:30px; text-shadow:5px 5px 10px rgba(0,0,0,1.0);}
.gran_slider_small_container{width:100%; height:10vh; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));}
.active_slider{display:flex; opacity:1;}
.active_dot{background-color:rgba(255,255,255,0.9);}
/*GRAN SLIDER END*/<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gran_slider_maincontainer" style="">
<div class="gran_slider_big_container" style=" ">
<i class="prev fa fa-chevron-left" style=""></i>
<i class="next fa fa-chevron-right" style=""></i>
<div class="gran_slider_big_navegation_container" style=" "></div>
<div class="gran_slider_big_item_container slider fade" style="">
<div class="gran_slider_big_item_gradient_overlay" style=""></div>
<div class="gran_slider_big_item_image move" style="background-color:red;"></div>
<div class="gran_slider_big_item_texts_container from_right_to_bottom" style=" ">
<span class="gran_slider_big_item_texts_title" style="">Titulo</span>
<span class="gran_slider_big_item_texts_description" style="">Esta es una descripción que se mueve hacia la derecha, empezando por fuera de la derecha.</span>
</div>
</div>
<div class="gran_slider_big_item_container slider fade" style="">
<div class="gran_slider_big_item_gradient_overlay" style=""></div>
<div class="gran_slider_big_item_image move" style="background-color:yellow;"></div>
<div class="gran_slider_big_item_texts_container from_right_to_bottom" style=" ">
<span class="gran_slider_big_item_texts_title" style="">Titulo</span>
<span class="gran_slider_big_item_texts_description" style="">Esta es una descripción que se mueve hacia la derecha, empezando por fuera de la derecha.</span>
</div>
</div>
<div class="gran_slider_big_item_container slider fade" style="">
<div class="gran_slider_big_item_gradient_overlay" style=""></div>
<div class="gran_slider_big_item_image move" style="background-color:blue;"></div>
<div class="gran_slider_big_item_texts_container from_right_to_bottom" style=" ">
<span class="gran_slider_big_item_texts_title" style="">Titulo</span>
<span class="gran_slider_big_item_texts_description" style="">Esta es una descripción que se mueve hacia la derecha, empezando por fuera de la derecha.</span>
</div>
</div>
</div>
<div class="gran_slider_small_container" style=""></div>
</div>
答案 0 :(得分：0)
在单击dot时调用的函数中，您将索引变量设置为该点的.eq()。你也将它打印到控制台，控制台打印一个对象而不是索引（我假设是你希望从这个函数得到的）。因为您无法从整个对象中精确获取索引，所以滑块代码会运行，但无法找到与索引匹配的任何滑块（因为不会有任何滑块）。
因此，而不是说
index = $(this).eq();
您可能想要这样说：
index = $(this).index();
这会将索引变量设置为单击的点的变量，然后将滑块更新为该变量。我知道这不会修复按钮（即使点击其他按钮，活动按钮也会保持显示），但我不确定这是否在你的问题范围内。