1

我有以下html：

<? while($arr as $data) { ?>
<td> 
 <div> 
  <a href="javascript:void(0)" class="status <?= $data['SUGGESTION_CD'] ?>"> 
    <img src="images/activate.gif" />
  </a> 
 </div>
</td>

<div class="remarks <?= $data['SUGGESTION_CD'] ?>" >
 <form action="status.php">
  <textarea value=""></textarea>
  <input type="submit" /> 
  <input type="button" />
 </form>
</div>
<? } ?>

我的以下脚本：

<style>
    .remarks { display: none; }
</style>
<script>
  $(document).ready(function(){
      $('.status').click(function(e){
          e.preventDefault(); //to prevent default action of link tag
          $(this).parent().next('.remarks').slideToggle();
      });
});
</script>

使用此脚本，所有备注 div 都被隐藏。但是当我单击锚点时，它不会在单击的锚点下方切换备注 div。单击该 div 上方的锚点时，如何使用类注释切换注释。

4

5 回答 5

1

您的标记无效。你DIV在外面TD。如下图所示移动到里面。TD应该移动到循环的末尾以包含DIV.

<? while($arr as $data) { ?>
<td> 
 <div> 
  <a href="javascript:void(0)" class="status <?= $data['SUGGESTION_CD'] ?>"> 
    <img src="images/activate.gif" />
  </a> 
 </div>


<div class="remarks <?= $data['SUGGESTION_CD'] ?>" >
 <form action="status.php">
  <textarea value=""></textarea>
  <input type="submit" /> 
  <input type="button" />
 </form>
</div>

</td>
<? } ?>

在此处查看演示

根据您的评论 - 找不到解决方法。从源头解决问题。

于 2013-09-20T05:44:23.500 回答
1

您将不得不按如下方式更改 html 代码：

<a href="javascript:void(0)" onclick="toggleDiv('<?= $data['SUGGESTION_CD'] ?>')">

<div class="remarks<?= $data['SUGGESTION_CD'] ?>" >
<form action="status.php">
<textarea value=""></textarea>
<input type="submit" /> 
<input type="button" />
</form>
</div>

和这样的脚本：

<script>
function toggleDiv(suggestionId) {
      $(".remarks"+suggestionId).slideToggle();
}
</script>

希望有帮助！

于 2013-09-20T05:46:28.917 回答
1

您的代码层次结构很复杂，并且不符合 w3c 标准，因此，如果您的代码中有可能的解决方案，而不是建议您根据标准更改代码（这是正确的做法），

一个是以下

<? 
$i=0;
while($arr as $data) { 
?>
<td> 
 <div> 
  <a href="javascript:void(0)" onclick="toggleThis('<?= $i; ?>')" class="status <?= $data['SUGGESTION_CD'] ?>"> 
    <img src="images/activate.gif" />
  </a> 
 </div>
</td>

<div id="div_<?= $i; ?>" class="remarks <?= $data['SUGGESTION_CD'] ?>" >
 <form action="status.php">
  <textarea value=""></textarea>
  <input type="submit" /> 
  <input type="button" />
 </form>
</div>
<?
$i++;
} 
?>

和 JavaScript

<script>
  function toggleThis(i) {
     $("#div_" + i).slideToggle();
  }
</script>
于 2013-09-20T05:46:31.303 回答
1

您发布的内容似乎很少是无效标记，这是无法获得 js 触发事件的问题。

  1. 您在div</td>之前有一个结束。.remarks
  2. 因此，它不会得到您编写的 js 事件。（虽然写对了）

你可以做的是：

<? while($arr as $data) { ?>
<td> 
 <div> 
  <a href="javascript:void(0)" class="status <?= $data['SUGGESTION_CD'] ?>"> 
    <img src="images/activate.gif" />
  </a> 
 </div>


<div class="remarks <?= $data['SUGGESTION_CD'] ?>" >
 <form action="status.php">
  <textarea value=""></textarea>
  <input type="submit" /> 
  <input type="button" />
 </form>
</div>
</td>  //<-----close it here
<? } ?>

那么你的脚本就可以正常工作了。

于 2013-09-20T05:46:46.887 回答
0

试试下面的 javascript 代码：

<script>
      $(document).ready(function(){
          $('.status').on("click",function(e){
              e.preventDefault(); //to prevent default action of link tag
              $(this).parent().next('.remarks').slideToggle();
          });
    });
</script>
于 2018-03-14T06:40:58.147 回答