Question

为什么$('a.current').parent('li').addClass('current');和$(this).hasClass('current').parent('li').addClass('current');无效？

a点击事件必须添加li.current http://jsfiddle.net/laukstein/ytnw9/

更新： Dropbox已关闭，因此我进行了更新 http://jsfiddle.net/laukstein/ytnw9/1/ 完整的JS

$(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>

Answer 1

~~.parent()只返回元素的直接父级。~~

<击>
如果该元素在<{1}}元素中不是直接，则<li>将返回一个空集。

~~您可能需要致电.closest('li')。~~
编辑：.parent('li')是直接父母;那不是你的问题。

<li>函数返回一个布尔值。你的第二行错了;你需要拨打hasClass。

Answer 2

$(this).hasClass('current').parent('li').addClass('current');肯定不起作用，因为hasClass返回一个布尔值（true / false）而不是jQuery对象。在调用它之后，您无法继续链接。

您可以改为使用filter：

$(this).filter('.current').parent('li').addClass('current');

Answer 3

你似乎只是在changeTab函数中使用了那段代码。

使用光标键时似乎只会调用它。

如果我转到您的演示并使用光标键，橙色高光会移动。如果我点击它没有，但没有任何代码可以获得我能看到的点击次数......

编辑添加：（从评论转换并意识到它实际上是我答案的扩展名）

在查看您指向我的标签代码后，我仍然不确定它是否正在调用changeTab函数中的代码。

如果我将标签声明更改为

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

然后它将突出显示单击的单元格，但当然不会取消选择旧单元格，因为当前索引已经更改。

我已经在jsfiddle.net/bhvYM（一个分支）上看到了粗略的修复。这涉及在设置新类之前清除所有li.current类。它有点被黑，所以可能没有完全按照你想要的那样做（我没有仔细查看当前/ newCurrent代码）但希望它是一个开始，将帮助你使它工作到你想要的地方。

我的想法是，现在至少把我认为是你问题主旨的李班。如果不是，那么我完全忽略了这一点。：）

为什么$（'a.current'）。parent（'li'）。addClass（'current'）;不管用？

3 个答案: