jQuery的显示隐藏功能工作不正常

Question

好了，所以我有这样的代码

//<!-- 

    $(document).ready (function() { 
$('.topicsShow').hide(); 
var i = 1; 
$('.clickFunc').each(function(){ 
    $(this).click(function(){ 
     $('.topicsShow:eq('+$(this).data('idf')+')').toggle('slow'); 
    }); 
    $(this).data('idf',i); 
    i++; 
}); 
    }); 

// --> 

它并没有在第一次正常工作，因为我VAR = 0;所以我改为1.稍微好一点。为什么是这样？有人可以解释吗？ 为什么它不能正常工作的原因是因为当我点击我的.clickFunc时，它会打开一个td元素。我隐藏了一整个tr，并且假设你点击了上面那个（这是类别标题）的tr元素，并且它应该打开该类别的所有主题。这段代码使得它在我点击它时只在tr中打开一个td元素。

有人可以帮我一下吗？

<tr class="clickFunc"> 
    <td></td> 
<td></td> 
</tr> 
<tr class="topicsShow"> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
<tr class="topicsShow"> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
<tr class="clickFunc"> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
<tr class="topicsShow"> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</tr> 

这是基本的模拟生成的东西。将会有更多的topicShow和更多的clickFunc，如果我添加更多的类别/主题

Answer 1

有时不工作，因为如果你硬编码这些div的可见性风格为“隐藏”和jquery的“show”方法不能恢复。奇怪的是，与“显示”方法相反，“隐藏”可以毫无问题地恢复硬编码的“可见”风格。因此，要隐藏/显示元素的目的，你必须使用隐藏/显示方法组合，没有可见性风格硬编码或使用jQuery的css方法，并设置可见性风格的愿望。

Answer 2

试试这个：

​​

我的猜测是，你需要的click处理程序之前分配$(this).data('idf',i);。

如果这没有帮助，请添加一些示例标记到您的文章。

UPDATE：

这适用于您的标记：

$(document).ready(function() { 
    $('.topicsShow').hide(); //hide topics 
    $('.clickFunc').each(function (i, elem) { 
     var self = $(elem) //cache object 
     self.click(function (e) { 
      //.nextUntil('.clickFunc') === get all siblings until .clickFunc 
      //.filter('.topicsShow') === select only elements that have the .topicsShow class 
      self.nextUntil('.clickFunc').filter('.topicsShow').toggle('slow'); 
      e.preventDefault(); //cancel bubbling 
      return false; 
     }); 
    }); 
}); 

的原因，我的原代码没有做任何事情，是我忘了把elem成一个jQuery包装（即$(elem) ）。

e.preventDefault();不会阻止点击事件。相反，它可以防止点击事件冒泡到更高级的元素（进一步在祖先树上）。我将它包含在内，因为我认为在tr元素切换后您不希望发生任何其他事情。我也包括return false;出于同样的原因（它可能是多余的，但我不知道它是否是，所以我包括它）。

the .data function（您在您的问题中使用:)）的目的是为选择器中的匹配DOM元素存储任意值（如变量值，或者在这种情况下，值为i）。

在你的问题中的代码执行以下操作：

$(document).ready(function() { 
    $('.topicsShow').hide(); //hide topics 
    var i = 1; //declare a var for incrementing 
    $('.clickFunc').each(function() { 
     $(this).click(function() { 
      //:eq(0) or :eq(1) as this only loops twice, see notes in markup below 
      //when you intialized `i` to 1, this became :eq(1) or :eq(2) 
      $('.topicsShow:eq(' + $(this).data('idf') + ')').toggle('slow'); 
     }); 
     $(this).data('idf', i); //store the value of `i` (0 || 1) || (1 || 2) in the matched element 
     i++; //increment `i` 
    }); 
}); 

与此标记：

<tr class="clickFunc"><!-- with var i = 0; click handler toggles .topicsShow:eq(0)--> 
    <td>clickFunc</td><!-- with var i = 1; click handler toggles .topicsShow:eq(1)--> 
    <td>clickFunc</td> 
</tr> 
<tr class="topicsShow"><!-- .topicsShow:eq(0) --> 
    <td>topicsShow</td> 
    <td>topicsShow</td> 
    <td>topicsShow</td> 
    <td>topicsShow</td> 
</tr> 
<tr class="topicsShow"><!-- .topicsShow:eq(1) --> 
    <td>topicsShow</td> 
    <td>topicsShow</td> 
    <td>topicsShow</td> 
    <td>topicsShow</td> 
</tr> 
<tr class="clickFunc"><!-- click handler toggles :eq(2)--> 
    <td>clickFunc</td><!-- with var i = 0; click handler toggles .topicsShow:eq(1)--> 
    <td>clickFunc</td><!-- with var i = 1; click handler toggles .topicsShow:eq(2)--> 
    <td>clickFunc</td> 
    <td>clickFunc</td> 
</tr> 
<tr class="topicsShow"><!-- .topicsShow:eq(2) --> 
    <td>topicsShow</td> 
    <td>topicsShow</td> 
    <td>topicsShow</td> 
    <td>topicsShow</td> 
</tr> 

希望这说明了一切。:)