Question

我试图在单击按钮时显示和隐藏表中的多个元素。该表是使用PHP for循环

生成的

echo "<tr> ";
echo "<td style='text-align:center'>$stock_date</td>";
echo "<td style='text-align:center'>$store_name</td>";
echo "<td style='text-align:center'>$store_city</td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($opening_stock,2)." <br/> </td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($wastage,2)."</td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($purchases,2)." <br/>";
echo "<span id='averages' style='visibility:hidden;'>$global_currency_sign ".number_format($avg_purch,2)."</span></td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($sales,2)."</td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($closing_stock,2)."</td>";

然后让jQuery执行以下操作

$('#show_averages').click(function(event){


if(document.getElementById("averages").style.visibility == 'hidden')
{
        document.getElementById("averages").style.visibility = 'visible';
}

else if(document.getElementById("averages").style.visibility == 'visible')
{
        document.getElementById("averages").style.visibility = 'hidden';
}

});

但是，它仅适用于找到的第一个id =“ averages”。如何使它显示id =“ averages”的所有元素？

Answer 1

ID（＃）用于标识页面上仅出现一次的元素。一旦重复，您可以按F12打开开发者控制台，并且应该看到一条错误消息：它发现了两个或多个具有相同ID的元素。当您希望具有相同属性的某个东西的多个实例时，可以给它一个 CLASS（。）

代替使用id选择器（＃），将您的td元素更改为如下所示：

echo "<tr> ";
                        echo "<td style='text-align:center'>$stock_date</td>";
                        echo "<td style='text-align:center'>$store_name</td>";
                        echo "<td style='text-align:center'>$store_city</td>";
                        echo "<td style='text-align:center'>$global_currency_sign ".number_format($opening_stock,2)." <br/> </td>";
                        echo "<td style='text-align:center'>$global_currency_sign ".number_format($wastage,2)."</td>";
                        echo "<td style='text-align:center'>$global_currency_sign ".number_format($purchases,2)." <br/>";
                        echo "<span class='averages' style='visibility:hidden;'>$global_currency_sign ".number_format($avg_purch,2)."</span></td>";
                        echo "<td style='text-align:center'>$global_currency_sign ".number_format($sales,2)."</td>";
                        echo "<td style='text-align:center'>$global_currency_sign ".number_format($closing_stock,2)."</td>";

然后选择您的元素，如下所示：

$('#show_averages').on('click', function(){

//your code here

})

请注意，您可能必须更改jQuery（或原始JS）以按类名进行选择，因为它们不再具有以前的ID。如果您选择使用香草JS，则必须在代码中使用类似这样的内容：

Document.getElementsByClassName('averages')

否则，您可以选择所有这些元素

var myAverages = $('.averages');

myAverages.each(function(){

  //this will loop through each of the average td elements and perform whatever code youd like here. You can reference each element with

  $(this).whatever....

})

Answer 2

因为元素ID应该始终是唯一的。您通过一个循环一次又一次地重复了相同的ID，但是当您通过jQuery 选择它时，它仅选择具有ID的第一次出现。解决方案是，在通过循环获取数据时，您始终应该首选使用 class 而不是ID

使用jQuery显示/隐藏多个<span>

2 个答案: