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 i = 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>

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

Answer 1

有时候不行，因为如果你将这些div的可见性样式硬编码为“隐藏”而jquery的“show”方法无法恢复。奇怪的是，与“show”方法相反，“hide”可以毫无问题地恢复硬编码的“可见”风格。因此，要按预期隐藏/显示元素，您必须使用hide / show方法组合而不使用可见性样式硬编码或使用jquery的css方法并根据需要设置可见性样式。

Answer 2

尝试一下：

$(document).ready(function () {
    'use strict';
    $('.topicsShow').hide();
    $('.clickFunc').each(function (i, elem) {
        //i and elem are parameters passed to .each;
        //i naturally increments.
        var self = elem; //cache object so that jQuery doesn't do several lookups
        self.data('idf', i).click(function (e) {
            $('.topicsShow:eq(' + self.data('idf') + ')').toggle('slow');
            e.preventDefault(); //cancel bubbling
            return false;
        });
    });
});

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

如果这样做无效，请在帖子中添加一些示例标记。

<强>更新

这适用于您的标记：

$(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();不会阻止点击事件。相反，它可以防止click事件冒泡到更高阶元素（进一步向上祖先树）。我把它包括在内，因为我假设在切换tr元素后你不希望发生任何其他事情。出于同样的原因，我也包括了return false;（它可能是多余的，但我不确定它是否存在，所以无论如何我都把它包括在内）。

the .data function（您在问题中使用:)的目的是将任意值（如变量值，或在本例中为i的值）存储到匹配的DOM中选择器中的元素。

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

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

希望这能解释一切。：）

jQuery show hide功能无法正常工作

2 个答案: