1

なぜ$('a.current').parent('li').addClass('current');と$(this).hasClass('current').parent('li').addClass('current');が機能しないのですか?

aクリックイベントにはli.current http://jsfiddle.net/laukstein/ytnw9/を追加する必要があります

更新: Dropbox がダウンしているので 、完全な JS でhttp://jsfiddle.net/laukstein/ytnw9/1/を更新しました

$(function(){
 var list=$('#list'),
     elementsPerRow=-1,
     loop=true,
     // find first image y-offset to find the number of images per row
     topOffset=list.find('a:eq(0)').offset().top,
     numTabs=list.find('li').length-1,
     current,newCurrent;

 function changeTab(diff){
  // a.current set by jQuery Tools tab plugin
  current=list.find('a.current').parent('li').addClass('current').index();
  newCurrent=(loop)?(current+diff+numTabs+1)%(numTabs+1):current+diff;
 if(loop){
   if(newCurrent>numTabs){newCurrent=0;}
   if(newCurrent<0){newCurrent=numTabs;}
 }else{
   if(newCurrent>numTabs){newCurrent=numTabs;}
   if(newCurrent<0){newCurrent=0;}
 }
  // don't trigger change if tab hasn't changed (for non-looping mode)
 if (current!=newCurrent){
   list.find('li').eq(current).removeClass('current');
   list.find('li').eq(newCurrent).addClass('current').find('a').trigger('click'); // trigger click on tab
 }
 }
 list
  // set up tabs
  .tabs("#content",{effect:'ajax',history:true})
  // find number of images on first row
  .find('a').each(function(i){
      // $(this).hasClass('current').parent('li').addClass('current');
      if(elementsPerRow<0&&$(this).offset().top>topOffset){
         elementsPerRow=i;
      }
  });
  // Set up arrow keys
  // Set to document for demo, probably better to use #list in the final version.
 $(document).bind('keyup focus',function(e){
    var key=e.keyCode;
    if(key>36&&key<41){
      if(key==37){changeTab(-1);}              // Left
      if(key==38){changeTab(-elementsPerRow);} // Up
      if(key==39){changeTab(+1);}              // Right
      if(key==40){changeTab(+elementsPerRow);} // Down
      e.preventDefault();
    }
 });
 // toggle looping through tabs
 $(':button').click(function(){
   loop=!loop;
   $('#loopStatus').text(loop);
 });
 $('a.current').parent('li').addClass('current');
});​

編集: 質問から省略された jsFiddle リンクから HTML を追加する

<button>Loop</button> <span id="loopStatus">true</span><br />
<ul id="list">
    <li><a class="current" href="http://dl.dropbox.com/u/6594481/tabs/one.html" title="one">1</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/two.html" title="two">2</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/three.html" title="three">3</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/four.html" title="four">4</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/five.html" title="five">5</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/six.html" title="six">6</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/seven.html" title="seven">7</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/eight.html" title="eight">8</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/nine.html" title="nine">9</a></li>
</ul>
<div id="content" style="clear:both;">Loading...</div>​
4

3 に答える 3

4

.parent()要素の直接の親のみを返します。

要素が要素内にない場合は、空のセットを返します。<li>.parent('li')

おそらく に電話する必要があります.closest('li')。
編集：<li>直接の親です。それはあなたの問題ではありません。

関数はhasClassブール値を返します。2 行目が間違っています。に電話する必要があります.filter。

于 2010-10-05T15:37:37.940 に答える
2

$(this).hasClass('current').parent('li').addClass('current');hasClassjQueryオブジェクトではなくブール値（true / false）を返すため、確かに機能しません。呼び出した後、連鎖を続けることはできません。

代わりに使用できますfilter：

$(this).filter('.current').parent('li').addClass('current');
于 2010-10-05T15:39:45.973 に答える
1

changeTab 関数でそのコードを使用しているだけのようです。

これは、カーソルキーを使用するときにのみ呼び出されるようです。

デモに移動してカーソル キーを使用すると、オレンジ色のハイライトが移動します。クリックしてもクリックされませんが、クリックを拾うコードはありません...

追加する編集：（コメントから変換され、実際には私の答えの延長であることに気付きました）

あなたが私に指摘したタブコードを見た後、私はそれが changeTab 関数でコードを呼び出しているかどうかまだわかりません。

タブ宣言を次のように変更すると

.tabs("#content",{effect:'ajax',history:true, onClick:function(){changeTab(0)}})

次に、クリックされたセルが強調表示されますが、現在のインデックスが既に変更されているため、もちろん古いセルの選択は解除されません。

jsfiddle.net/bhvYM (フォーク) で見ることができる大まかな修正を入れました。これには、新しいクラスを設定する前に、すべての li.current クラスをクリアすることが含まれます。少しハッキングされているため、すべてを希望どおりに正確に実行できない可能性があります (current/newCurrent コードを詳しく調べていませんでした)。

私の考えでは、これは少なくとも、あなたの質問の要点であると私が考えるliクラスを置いているということです. そうでない場合は、ここでのポイントを完全に見逃しています。:)

于 2010-10-05T15:54:36.040 に答える