0

好的，所以我有这个代码

//<!--

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

4

2 回答 2

0

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

于 2012-10-22T03:04:44.033 回答
0

试试这个：

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

该函数（您在问题中使用的函数：））的目的是将任意值（如变量值，或者在本例中为 的值）.datai存储到选择器中匹配的 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>

希望这能解释一切。:)

于 2012-10-22T03:10:09.740 回答