javascript - 使每个“阅读更多”事件单击在 HTML 表格中不同时显示数据

Question

我正在从 SQL 表中获取数据以显示在 HTML 表中。问题是我想将数据保留在“阅读更多”事件中，这样表格就不会乱七八糟。

由于我按行获取数据，因此我在 JQuery 中使用类名。如何使“阅读更多”事件不能同时对所有行起作用？这是我的代码。

$('[class^="text1"]').hide();

$('button[class^="toggle1"]').click(function() {
  var elem = $('#toggle').text();
  if (elem == "Read More") {
    //alert('hiii');
    //Stuff to do when btn is in the read more state
    $('button[class^="toggle1"]').text("Read Less");
    $('.text1').slideDown();
  } else {
    //Stuff to do when btn is in the read less state
    $('button[class^="toggle1"]').text("Read More");
    $('.text1').slideUp();
  }
});

<td width="30%"><label>
    <p id="text" class='text1'><?php echo ($row['StartDate'] )?></p> 
    <button type='button' id="toggle" class='toggle1' style="background: 
    none; border:none; padding: 0; cursor: pointer; border-bottom:1px solid 
    #444;">Read More</button>				 
  </label>
</td>

我期待代码会是这样的：

each.$('button[class^="toggle1"]').click(function() {

这样就不会同时触发所有“阅读更多”事件。

这是我的工作示例：

Answer 1

如果我理解正确，你有很多行它们的“id”和“class”标签是相似的。在这种情况下，您宁愿需要一个 for 循环来创建它们，这将为每一行创建唯一的 id/class，以便您可以从 Jquery 正则表达式匹配器访问仅匹配一行或 id/class 的标识符。