使用jQuery更新所有

Question

JSFiddle . When i click the 2nd img then click next, it doesn't update. I want update the both next() and img at the same time. Is this possible ?

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();
   
});

Answer 1

$('img', 'ul').on('click', function() {
    $(".myclass").eq($(this).parent('li').index()).show()
                 .siblings('div').hide();
});

$('.selected').show();

$(".next").click(function(){
    if ($('.myclass:visible').length) {
        var curr = $('.myclass:visible'),
            next = curr.next('.myclass').length?curr.next('.myclass'):$('.myclass').first();

        curr.hide();
        next.show();
    }else{
        $('.myclass').first().show();
    }
});

FIDDLE​

Answer 2

seems you wanted this:

$('img', 'ul').on('click', function() {
    $(".myclass").eq($(this).parent('li').index()).addClass('selected').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();
   
});

http://jsfiddle.net/namVk/6/