Javascript / PHP，避免 CSS 冲突

Question

我有一个简单的显示和隐藏Javascript：

// JS function used in show/hide connectivity details function in LIB
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".connectivityshow").click(function(event){
        var target = event.target.parentElement.nextSibling;
        $(target).toggle('blind');
    });
});
</script>

然后在我的 PHP 中我有：

print '<tr class="connectivityshow">';

表本身有一个“connectivity_list”类我希望显示为class=connectivityshow的行，而我希望隐藏的行没有类。

        // Adding more details to the connectivity list, line details (java show and hide)
        //Calculating Router IP Business (+1 from start ip)
        $ip_num = ip2long($ref['start_ip']);
        $start_ip = long2ip($ip_num + 1);
        print '<tr style="display:none">';
        printf('<td colspan="3">Radius Username: %s<br>Radius Password: %s<br>Bandwidth Usage Allowance: %s</td><td colspan = "4">Router IP: %s<br>Start IP: %s<br>IP Block Size: %s</td>',$ref['radius_username'], $ref['radius_pa$
        print '</tr>';

我有基于斑马的 CSS，所以每个其他表格都是不同的颜色。使用这种布局，隐藏表会从 CSS 中选择第二种颜色。我很想使 CSS 只使用 3 行，但我确实有另一个表没有显示和隐藏功能，它依赖于相同的 CSS。

你会建议我如何克服这个问题？

  #main-content table.connectivity_list {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0px;
    border-bottom: 2px solid #999;
}
#main-content table.connectivity_list thead, #main-content table.connectivity_list thead tr, #main-content table.connectivity_list thead th, #main-content table.connectivity_list thead tr th {
    font-weight: bold;
    font-size: 12px;
    border-top: 2px solid #999;
    border-bottom: 2px solid #999;
}
#main-content table.connectivity_list tbody {
}
#main-content table.connectivity_list tbody tr:nth-child(odd) {
    background: #ddd;
}
#main-content table.connectivity_list tbody tr {
    background: #ccc;
}
*/ #main-content table.connectivity_list td, #main-content table.connectivity_list th {
    padding: 2px;
    line-height: 1.3em;
}
#main-content table.connectivity_list tfoot td .bulk-actions {
    padding: 15px 0 5px 0;
}
#main-content table.connectivity_list tfoot td .bulk-actions select {
    padding: 4px;
    border: 1px solid #ccc;
}
#main-content table.connectivity_list tbody tr:hover td {
    background-color: #eee;
}

Answer 1

我通过在 CSS 中创建新类来阻止冲突来解决此问题。

谢谢大家。

Answer 2

如果我理解正确，您应该可以使用connectivityshow 将static 的类添加到tr。然后，在您的 JS 中，将您的选择器更改为 $(".connectivityshow:not(.static)")

这应该在任何connectivityshow 点击时运行该函数，除非它还具有static 类

编辑

在您的 php 中，将 tr 的打印更改为 print '<tr class="connectivityshow static">';

在你的js中，将点击事件改为$(".connectivityshow:not(.static)").click

执行这两件事可以让您根据需要为trs 设置样式，而无需添加额外的CSS，但如果static 类在元素上，它也不会运行点击事件。

Answer 3

不是很了解，但是从你的问题中收集到的信息，如果你想隐藏没有class的tr，请执行以下操作

   if($('table.connectivity_list').find('tr.Class').length == 0)
   {
       //this is tr with no class, hide it
   }