JQuery - 显示/隐藏行和操作 css

Question

在为我的问题寻找解决方案时，我遇到了这个线程:使用 javascript 类显示/隐藏表行 Show/Hide Table Rows using javascript classes

我选择了 Vape 的解决方案(第 4 号)并且效果非常好。但是还有一些事情要做:我正在使用一个 css 背景图像(一个带有“加号”的简单圆圈用于保存点击事件的行)。单击加号打开下面的行。到目前为止，一切都很好。展开行后，我需要将加号更改为减号，这样可以再次隐藏行。经过一些摆弄(我在 JQuery/Javascript 中非常无用 - 然而!我才刚刚开始......)，我设法切换了 css 类 cat-plus 和 cat-minus。问题是行数多于可以扩展的行数。但是每次单击可展开行时，所有其他可展开行上的加号都会变为减号，尽管它们当然会保持折叠状态，因为它们尚未被单击。

我知道我必须考虑被点击行的数据生产猫，但我不知道该怎么做。

例子在这里: http://jsfiddle.net/8gbLagjz/

这是 HTML

<table>
<tr>
    <td>Product</td>
    <td>Price</td>
    <td>Destination</td>
    <td>Updated on</td>
</tr>
<tr>
    <td>Oranges</td>
    <td>100</td>
    <td><a href="#" class="toggler" data-prod-cat="1"><span class="cat-plus">+ On Store</span></a></td>
    <td>22/10</td>
</tr>
<tr class="cat1" style="display:none">
    <td>Oranges</td>
    <td>120</td>
    <td>City 1</td>
    <td>22/10</td>
</tr>
<tr class="cat1" style="display:none">
    <td></td>
    <td>140</td>
    <td>City 2</td>
    <td>22/10</td>
</tr>
<tr>
    <td>Apples</td>
    <td>100</td>
    <td><a href="#" class="toggler" data-prod-cat="2"><span class="cat-plus">+ On Store</span></a></td>
    <td>22/10</td>
</tr>
<tr class="cat2" style="display:none">
    <td></td>
    <td>120</td>
    <td>City 1</td>
    <td>22/10</td>
</tr>
<tr class="cat2" style="display:none">
    <td></td>
    <td>140</td>
    <td>City 2</td>
    <td>22/10</td>
</tr>

脚本

$(document).ready(function(){
$(".toggler").click(function(e){
    e.preventDefault();
    $('.cat'+$(this).attr('data-prod-cat')).toggle();
    $(".cat-plus").toggleClass("cat-minus");
});

});

CSS

.cat-plus {background-image:url("../images/plus.png"); background-repeat:no-repeat; background-position:-15px center; border-left: 20px solid green;}
.cat-minus {background-image:url("../images/minus.png"); background-repeat:no-repeat; background-position:-15px center; border-left: 20px solid red;}

我已经用绿色(表示 +)和红色(表示 -)背景交换图像，因为我已经无法在此处集成图像。但无论如何你都会看到我想要什么。在此示例中，我不希望在单击第一行时第二行变为红色。

如有任何帮助，我们将不胜感激。

Answer 1

我找到了解决您问题的方法:

jsfiddle 示例链接:http://jsfiddle.net/larryjoelane/8gbLagjz/5/

您遇到的主要问题是选择包含您的跨度类猫加类。因为它是你的 anchor 标签的 child ，所以你必须使用Jquery parent() 函数，然后找到包含 .cat-plus 类的范围使用 find() 函数。找到跨度后，您可以使用 toggleClass() 来切换.cat-plus 类。

我只需更改您的 JavaScript，以下是我所做的更改:

      $(document).ready(function(){


        $(".toggler").click(function(e){

          e.preventDefault();

            //the data stored in the data-prod-cat
            var prodCat = ($(this).attr("data-prod-cat"));

           //toggle the link clicked on
           $(".cat" + prodCat).toggle();


           //select the parent and find the span so you can
          //toggle the "cat-plus" class
          $(this).parent().find("span").toggleClass("cat-plus");

         //toggle the cat-minus class
         $(this).toggleClass("cat-minus");        

        });
      });