-1

私は李エピソードのグループを持っています。各グループは、クリック時に赤のクラスを 1 つだけ持つことができますが、そのグループ内からのみ持つことができます。各グループは、次のように定義され（3 つのグループに分けられます）、次のようになります。

  1. li には .newseason があり、それ以降、newseason に戻る前のすべての li はグループです。

  2. 最初の .newseason の前のすべてのリス

html:

<ul id="seasons">

<li class="red">Episode 1</li>
<li>Episode 2</li>
<li>Episode 3</li>

<li class="newseason">Episode 1</li>
<li class="red">Episode 2</li>
<li>Episode 3</li>

<li class="newseason">Episode 1</li>
<li>Episode 2</li>
<li class="red">Episode 3</li>
<li>Episode 4</li>

</ul>

jQuery:

$('li').live('click',function(){
//add .red to clicked li in group and remove previous .red from same group
});

フィドルはこちら

各グループがクリック時に 1 つの赤のクラスのみを持ち、そのグループ内からのみ持つにはどうすればよいでしょうか? 親クラスを追加せずに .newseason クラスに基づいてそれを行う方法を知りたいです。どんな助けでも大歓迎です！

4

3 に答える 3

2

「グループ」を別々のULタグに分けて（Johannesも上記で提案したように）、コードを次のようにします。

HTML:

<ul>
    <li>Episode 1</li>
    <li>Episode 2</li>
    <li>Episode 3</li>
</ul>

<ul>
    <li>Episode 1</li>
    <li class="red">Episode 2</li>
    <li>Episode 3</li>
</ul>

<ul>
    <li>Episode 1</li>
    <li>Episode 2</li>
    <li class="red">Episode 3</li>
    <li>Episode 4</li>
</ul>​

そしてJS：

$('li').live('click',function(){
    $(this).parent().find('li.red').removeClass('red');
    $(this).addClass('red');
});​

JSFiddle で確認できます: http://jsfiddle.net/w8sUz/

于 2012-05-10T17:22:37.313 に答える
1

すべてを同じ UL 要素内に保持するには (前述のように)、これを行う必要があります... http://jsfiddle.net/w8sUz/4/

これを達成するためのより良い/より最適化された方法があると確信していますが、これは機能します。

HTML

<ul class="seasons">
  <li class="newseason">Episode 1</li>
  <li class="red">Episode 2</li>
  <li>Episode 3</li>

  <li class="newseason">Episode 1</li>
  <li class="red">Episode 2</li>
  <li>Episode 3</li>

  <li class="newseason">Episode 1</li>
  <li>Episode 2</li>
  <li class="red">Episode 3</li>
  <li>Episode 4</li>
</ul>​

JS:

$('li').live('click',function(){
    $(this).addClass('red');
    if( !$(this).hasClass('newseason') )
    {
        var prev = $(this).prev();
        while( prev.parent().attr('class') == 'seasons' )
        {
            if( prev.hasClass('red') )
            {
                prev.removeClass('red');
                return true;
            }
            if( prev.hasClass('newseason') )
            {
                break;
            }
            prev = prev.prev();
        }
    }        

    var next = $(this).next();
    while( next.parent().attr('class') == 'seasons' )
    {
        if( next.hasClass('newseason') )
        {
            break;
        }
        if( next.hasClass('red') )
        {
            next.removeClass('red');
            return true;
        }
        next = next.next() ;
    } 
});​

お役に立てれば ：）

于 2012-05-10T18:37:54.797 に答える
0

これを試して：

$('li').live('click',function(){
$('.red').removeClass('red');
$(this).addClass('red');
于 2012-05-10T17:20:47.173 に答える