jquery切换 "variable"div

Question

我有来自数据库的结果页面，在每一行上我都有显示/隐藏按钮，应该显示/隐藏带有 $title 的容器....

我尝试使用 jquery 但它不起作用:(

<div class="container">
 <div class="show_hide_button_<? echo $article_id_tmp; ?>"><a href="#">show/hide</a></div>
    <div class="show_hide_container_<? echo $article_id_tmp; ?>">
</div>
</div>



<script type="text/javascript">
var div_id = '$article_id_tmp';

div_id_b+='.show_hide_button_'+ 'div_id';
div_id_c+='.show_hide_container_'+ 'div_id';

$(function(){
  $('div_id_b').click(function(){
     $('div_id_c').toggle();     
  });
});

谢谢

Answer 1

您的变量是变量，而不是字符串，因此您不应将它们括在空格内:

var div_id = '$article_id_tmp';

div_id_b+='.show_hide_button_'+ 'div_id';
div_id_c+='.show_hide_container_'+ 'div_id';

$(function(){
  $(div_id_b).click(function(){
     $(div_id_c).toggle();     
  });
});

此外，还需要在JS中echo$article_id_tmp:

var div_id = '<?php echo $article_id_tmp ?>';

div_id_b+='.show_hide_button_'+ 'div_id';
div_id_c+='.show_hide_container_'+ 'div_id';

$(function(){
  $(div_id_b).click(function(){
     $(div_id_c).toggle();     
  });
});

此外，类通常用于对页面上的相似元素进行分组；但是，您为每个元素分配了不同的类。为了保持一致性，您可能需要考虑使用“id”而不是类，或者更好的是，如下所示:

<div class="container">
   <div class="show_hide_button"><a href="#">show/hide</a></div>
   <div class="container">
   </div>
</div>

$('.show_hide_button').click(function () {
    $(this).next('.container').toggle();
});

您当然可以删除container类，然后只使用$(this).next().toggle()