javascript - 使每个 "Read more"事件点击在一个 HTML 表格中不同时间显示数据

Question

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

因为我是按行获取数据，所以我在 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() {

这样就不会同时触发所有“Read More”事件。

这是我工作的例子:

Answer 1

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