1

JSFiddle。現在アクティブな div にクラスを追加したい。addClass() を使用する必要があることはわかっていますが、どこで使用する必要があるかわかりません。

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>

jquery:

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

</p>

4

4 に答える 4

3

li現在アクティブなを強調する意図はありますか? http://jsfiddle.net/b3VaX/50/

あなたのコードは問題ありませんが、css が強調表示と表示に重点を置いている場合、javascript はアクティブな要素の css クラスを切り替えることだけを心配することができます。

setActive(0);

$('li').click(function() {
    setActive($(this).index());
});

$(".next").click(function(){
    var current = $('ul li.selected').index(),
        maxIndex = $('ul li').length - 1,
        next = (current + 1) >  maxIndex ? 0 : (current + 1);

    setActive(next);
});

function setActive(i) {
    var li = $('ul li').eq(i);

    $('ul li').removeClass('selected');
    li.addClass('selected');
    $('.myclass').removeClass('selected');
    $('.myclass').eq(i).addClass('selected');
}

​

CSS:

.myclass.selected {
    display: block;
}

ul li.selected {
    background-color: yellow;
}
于 2012-08-25T01:57:42.270 に答える
0

実際にクラスを追加/削除したい場所が完全にはわかりませんが、見てください:

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

        curr.hide().removeClass('someClassHere');
        next.show().addClass('someOtherClassHere');
    }else{
        $('.myclass').first().show();
    }
});

JSFiddle

于 2012-08-25T01:32:49.167 に答える
0

表示している要素にクラスを追加し、非表示にしている要素からクラスを削除しようとしているようです。これはまさにそれを行う必要があります: http://jsfiddle.net/cjc343/b3VaX/15/

私が行った変更は非常に単純です。各クリック イベントで、何かを show() すると、「選択された」クラスが追加され、何かを hide() すると、それが削除されます。

于 2012-08-25T01:44:43.833 に答える
0

多分これはあなたがやりたいことです http://jsfiddle.net/unloco/b3VaX/39/

CSS:

li.active img{border:1px solid red}

最初に、最初のliを「アクティブ化」し、

$('ul#myul li:first').addClass('active');

次に、クリックして次をアクティブにします。

$('ul#myul li.active').removeClass('active').next().addClass('active').length ||
$('ul#myul li:first').addClass('active');
于 2012-08-25T01:49:50.160 に答える