JSFiddle。2 番目の画像をクリックしてから [次へ] をクリックしても、更新されません。next() と img の両方を同時に更新したい。これは可能ですか?
HTML:
<div class="myclass selected">
Content 1
</div>
<div class="myclass">
Content 2
</div>
<div class="myclass">
Content 3
</div>
<ul>
<li><img src="http://www.lillehammer.com/ImageVault/Images/id_2122/scope_66/ImageVaultHandler.aspx" /></li>
<li><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Valued_image_seal.svg/40px-Valued_image_seal.svg.png" /></li>
<li><img src="http://www.iconico.com/i/icoImageFilterPro100.gif" /></li>
</ul>
<a class="next">next</a>
css:
.myclass {display:none;}
img {height: 20px; width: 20px; position: relative; display: block; margin: 20px; float: left;}
JavaScript:
$('img', 'ul').on('click', function() {
$(".myclass").eq($(this).parent('li').index()).show()
.siblings('div').hide();
});
$('.selected').show();
$(".next").click(function(){
var selected = $('.selected');
selected.removeClass('selected');
selected.hide();
var next = selected.next(".myclass");
if(next.length === 0) {
next = $(".myclass").first();
}
next.addClass('selected');
next.show();
});