Question

我有来自DB的结果页面，每行显示/隐藏按钮，应显示/隐藏带有$ 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

JavaScript代码需要正确输出PHP变量，正如您在HTML中所做的那样。所以你需要改变：

var div_id = '$article_id_tmp';

到

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

这需要在问题中输出<script> 内联。 JavaScript不能以单独的文件存在于此表单中。

，正如@Matt所回答的那样，div_id是一个变量，在分配给div_id_b和div_id_c时联合在一起时不应引用变量。作业应该是：

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

最后，jQuery选择器不需要引用，因为它们已经是变量。现有代码将寻找一个名为div_id_b的元素，它不存在。

正确的选择器应为$(div_id_b).click(...)和$(div_id_c).toggle();

Answer 2

您的变量是变量，而不是字符串，因此您不应将它们包含在空格中：

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();     
  });
});

此外，您需要echo JS中的$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();     
  });
});

此外，classes通常用于对页面上的类似元素进行分组;但是你要为每个元素分配不同的类。为了保持一致性，您可能需要考虑使用“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()

Answer 3

对我来说，看起来你必须写

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

而不是

var div_id = '$article_id_tmp';

这样你实际上正在喂正确的字符串。否则div_id始终为string '$article_id_tmp'

Answer 4

也许您需要简化标记。使用某些类将show/hide按钮和某些类标记为content容器。而且剧本非常小且可以理解：

$('.container .show_hide_button a').click(function() {
    $(this).parent().siblings('.show_hide_container').toggle();
});

现场演示： http://jsfiddle.net/gYkKz/4/

jquery切换“变量”div

4 个答案: