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

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。如果您选择使用 vanilla 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....

})