Question

在搜索我的问题的解决方案时，我遇到了这个帖子：使用javascript类显示/隐藏表行 Show/Hide Table Rows using javascript classes

我选择了Vape的解决方案（第4号）并且效果非常好。但还有一些事情需要做：我使用了css背景图片（一个带有＆＃39;加号的简单圆圈＆＃39;用于保存click事件的行）。单击加号可打开基础行。到现在为止还挺好。扩展行后，我需要将加号更改为减号，这样就可以再次隐藏行。经过一番调整（我在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;}

我已经用绿色（for +）和红色（for - ）背景替换了图像，因为我已经看过了没办法在这里整合图像。但是无论如何你都会看到我的意思。在这个示例中，我不希望第二行在单击第一行时变为红色。

非常感谢任何帮助。

Answer 1

我找到了解决问题的方法：

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

您遇到的主要问题是选择包含您的范围的范围类猫加班。因为它是你的锚标记的孩子，所以你必须使用它 Jquery parent（）函数然后找到包含.cat-plus类的span 使用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");        

        });
      });

Answer 2

我怀疑这条线没有做你想做的事：

$(".cat-plus").toggleClass("cat-minus");

相反，你可能想要：

$(".cat-plus").addClass("cat-minus").removeClass(".cat-plus");

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

2 个答案: