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> 

希望這說明了一切。:)