jQuery的next（）和prev（）不工作

Question

我面臨着一些麻煩GET值與jQuery next和prev

我怎樣才能得到下一個或同級 當我點擊下一步或上它將存儲值上一個值每次上課時都會更新。

$(document).ready(function(){ 
 
    
 
}); 
 
var currentIndex = 0; 
 
var boxTotal = $('.content').length; 
 
var boxIndex = $('.content.show').index(); 
 

 
var imgNext = $('.content.show').next().text(); 
 
var imgPrev = $('.content.show').prev().text(); 
 

 
function cycleItems() { 
 
    var box = $('.content').eq(currentIndex); 
 
    box.siblings().removeClass('show'); 
 
    box.addClass('show'); 
 
} 
 

 
function boxNext(){ 
 
    currentIndex ++; 
 
    if (currentIndex > boxTotal - 1) { 
 
    currentIndex = 0; 
 
    } 
 
} 
 

 
function boxPrev(){ 
 
    currentIndex --; 
 
    if (currentIndex < 0) { 
 
    currentIndex = boxTotal - 1; 
 
    } 
 
} 
 

 
$('.next').click(function() { 
 
    boxNext(); 
 
    cycleItems(); 
 
    $('.valPrev').text('is '+imgPrev); 
 
    $('.valNext').text('is '+imgNext); 
 
}); 
 

 
$('.prev').click(function() { 
 
    boxPrev(); 
 
    cycleItems(); 
 
    $('.valPrev').text('is '+imgPrev); 
 
    $('.valNext').text('is '+imgNext); 
 
});

.content{ 
 
    display: none; 
 
} 
 

 
.content.show{ 
 
    display: block; 
 
} 
 
.content img{ 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 

 
.prev img, .next img{ 
 
    width: 100px; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    <div class="content"><span>1</span></div> 
 
    
 
    <div class="content show"><span>2</span></div> 
 
    
 
    <div class="content"><span>3</span></div> 
 
    
 
    <div class="content"><span>4</span></div> 
 
    
 
    <div class="content"><span>5</span></div> 
 
</div> 
 

 

 
<div class="prev"> 
 
<label>Prev</label> <span class="valPrev"></span> 
 
</div> 
 
<div class="next"> 
 
<label>Next</label> <span class="valNext"></span> 
 
</div>

Answer 1

的問題是因爲你只設置imgNext和imgPrev負載。當您點擊某個標籤時，您需要更新它們。要做到這一點，最簡單，最乾的方法是放進了cycleItems功能更新值的代碼，就像這樣：

$(document).ready(function() { 
 
    var currentIndex = 0; 
 
    var boxTotal = $('.content').length; 
 
    var boxIndex = $('.content.show').index(); 
 

 
    function cycleItems() { 
 
    $('.content').eq(currentIndex).addClass('show').siblings().removeClass('show'); 
 
    var imgNext = $('.content.show').next().text(); 
 
    var imgPrev = $('.content.show').prev().text(); 
 
    $('.valPrev').text('is ' + imgPrev); 
 
    $('.valNext').text('is ' + imgNext); 
 
    } 
 

 
    $('.next').click(function() { 
 
    currentIndex++; 
 
    if (currentIndex > boxTotal - 1) 
 
     currentIndex = 0; 
 

 
    cycleItems(); 
 
    }); 
 

 
    $('.prev').click(function() { 
 
    currentIndex--; 
 
    if (currentIndex < 0) 
 
     currentIndex = boxTotal - 1; 
 

 
    cycleItems(); 
 
    }); 
 
});

.content { 
 
    display: none; 
 
} 
 

 
.content.show { 
 
    display: block; 
 
} 
 

 
.content img { 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 

 
.prev img, 
 
.next img { 
 
    width: 100px; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    <div class="content"><span>1</span></div> 
 
    <div class="content show"><span>2</span></div> 
 
    <div class="content"><span>3</span></div> 
 
    <div class="content"><span>4</span></div> 
 
    <div class="content"><span>5</span></div> 
 
</div> 
 

 
<div class="prev"> 
 
    <label>Prev</label> <span class="valPrev"></span> 
 
</div> 
 
<div class="next"> 
 
    <label>Next</label> <span class="valNext"></span> 
 
</div>

注意，我簡化了地方的邏輯了。

Answer 2

您的意思是？你需要改變的東西

$(document).ready(function() { 
 

 

 
    var currentIndex = 0; 
 
    var boxTotal = $('.content').length; 
 
    var boxIndex = $('.content.show').index(); 
 

 

 
    function cycleItems() { 
 
    var imgNext = $('.content.show').next().text(); 
 
    var imgPrev = $('.content.show').prev().text(); 
 
    $('.valPrev').text('is ' + imgPrev); 
 
    $('.valNext').text('is ' + imgNext); 
 

 
    var box = $('.content').eq(currentIndex); 
 
    box.siblings().removeClass('show'); 
 
    box.addClass('show'); 
 

 
    } 
 

 
    function boxNext() { 
 
    currentIndex++; 
 
    if (currentIndex > boxTotal - 1) { 
 
     currentIndex = 0; 
 
    } 
 
    } 
 

 
    function boxPrev() { 
 
    currentIndex--; 
 
    if (currentIndex < 0) { 
 
     currentIndex = boxTotal - 1; 
 
    } 
 
    } 
 

 
    $('.next').click(function() { 
 
    boxNext(); 
 
    cycleItems(); 
 
    }); 
 

 
    $('.prev').click(function() { 
 
    boxPrev(); 
 
    cycleItems(); 
 
    }); 
 
});

.content { 
 
    display: none; 
 
} 
 

 
.content.show { 
 
    display: block; 
 
} 
 

 
.content img { 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 

 
.prev img, 
 
.next img { 
 
    width: 100px; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    <div class="content"><span>1</span></div> 
 

 
    <div class="content show"><span>2</span></div> 
 

 
    <div class="content"><span>3</span></div> 
 

 
    <div class="content"><span>4</span></div> 
 

 
    <div class="content"><span>5</span></div> 
 
</div> 
 

 

 
<div class="prev"> 
 
    <label>Prev</label> <span class="valPrev"></span> 
 
</div> 
 
<div class="next"> 
 
    <label>Next</label> <span class="valNext"></span> 
 
</div>