Question

我有以下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上方的锚点时用类别备注切换备注。

Answer 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>
<? } ?>

See demo here

根据您的意见 - 找不到变通办法。从源头解决问题。

Answer 2

您必须按如下方式更改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>

希望有所帮助！

Answer 3

您的代码层次结构很复杂，不符合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>

Answer 4

你发布的内容似乎是无效的标记，这是一个无法获得js被解雇事件的问题。

您在</td> div。

.remarks

由于这个原因，它不会得到你写的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
<? } ?>

然后你的脚本将完全正常工作。

Answer 5

尝试以下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>

在点击锚点上切换div

5 个答案: