Question

首先，我对jQuery非常陌生，这是我第一次尝试使用它。

我在php中有此代码

echo "<table><tr onclick=\" myFunction($id) \" style=\"$style\" id =\"set_\" ><td>Click</td></tr></table>";

我希望如果单击此tr，则myFuction函数将启动，并且该函数的代码：

function myFunction(id) {

    var id = "set_";
    if (document.getElementById(id.concat(id)).style.display === "block") {
        document.getElementById(id.concat(id)).style.display = "none";
        x++;
    } else {
        document.getElementById(id.concat(id)).style.alignItems = "center";
        document.getElementById(id.concat(id)).style.display = "block";
        x--;

    }
    if (x == 0) {
        document.getElementById("table").style.visibility = "hidden";
    } else {
        document.getElementById("table").style.visibility = "visible";
    }
}

它显示在这里：

for ($x = 0; $x < $i; $x++) {
    echo "<tr>";
    echo "<td id='set_$id' style='display: none'>";
    echo $result_path[$x];
    echo "</td>";
    echo "</tr>";
}

所以通常我对其中一些有一个td，但是myFunction只显示其中之一。我看到我可以通过jQuery显示它，并且我尝试了它：

$(document).click(myFunction(req_id){
    var id = "set_";
    var id2 = id+req_id;
    $("$id2").show();
});

目前，我只是尝试了表演，但我无法，您能帮我吗？谢谢。

Answer 1

这是一个使用jQuery的实现，就像您在问题中建议的那样，并且远离了id，而是使用了data-groupid属性。

编辑-更新为支持显示：无

function myFunction(req_id) {
  // use jquery to find all the elements that have that same id
  $('td[data-groupid="set_' + req_id + '"]').toggle();

  // find all the visible elements in #table
  let visible = $('#table td')
                  .filter(function() { 
                            return $(this).css('display') == 'table-cell' 
                            } )
                  .length;

  // check if the length is > 0 and show the contianing table if need be. 
  if (visible)
    $('#table').show();
  else
    $('#table').hide();

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Name</th>
  </tr>
  <tr onclick=" myFunction(376) " style="cursor:hand; background: lightgrey;">
    <td><img src="thumbnails_ 376.jpg"></td>
  </tr>
  <tr onclick=" myFunction(377) " style="cursor:hand; background: lightgrey;">
    <td><img src="thumbnails_ 377.jpg"></td>
  </tr>
</table>

<table id='table' style="display: none; ">
  <tr>
    <th> Output adı:</th>
  </tr>
  <tr>
    <td data-groupid='set_376' style='display: none;'>result1_1</td>
  </tr>
  <tr>
    <td data-groupid='set_376' style='display: none;'>result1_2</td>
  </tr>
  <tr>
    <td data-groupid='set_377' style='display: none;'>result2_1</td>
</table>

显示和隐藏所有具有相同名称的div

1 个答案: