Question

如果你点击引用它隐藏自己并显示完整的评论，我正试图得到它。

此当前代码仅适用于第一个列表项。我似乎无法得到它。这可能是显而易见的，我只是不知道jquery。

http://jsfiddle.net/TacoFiesta/L3a70h38/2/

<li><blockquote>
        <q id="Quote"><?php echo $rv['Quote'] ?></q>
        <q id="Review"><?php echo $rv['Review'] ?></q>
        <img src="images/reviews/<?php echo $rv['Image'] ?>">
        <cite>
        - <?php echo $rv['Name']; ?>
        - <?php echo $rv['Location']; ?>
        - <?php echo $rv['reviewDate']; ?>
        - <?php echo $rv['Site']; ?>
        </cite>
</blockquote></li>

$(document).ready(function(){
  $("#Review").click(function(){
    $("#Quote").show();
    $("#Review").hide();
  });
  $("#Quote").click(function(){
    $("#Review").show();
    $("#Quote").hide();
  });
});

谢谢

Answer 1

就像j08691（编辑：和KoenW）所说的那样，你必须使用类，因为ID应该是唯一的...你可以找到解决问题的方法（找到父元素，并在其中搜索该ID），但这会破坏课程与ID的目的。

尝试这样的事情： http://jsfiddle.net/q7rypnxp/1/

（将ID更改为HTML中的类）：

$(document).ready(function(){
  $(".Review").click(function(){
    $(this).siblings(".Quote").show();
    $(this).hide();
  });
  $(".Quote").click(function(){
    $(this).siblings(".Review").show();
    $(this).hide();
  });
});

Answer 2

id属性的值对于页面是唯一的。您需要使用类（或不同的唯一ID）才能使其正常工作。

这是一个分叉的jsfiddle： http://jsfiddle.net/KoenW/n1fxhkkk/1/

Answer 3

将您的id="Quote"更改为class="Quote"。对id="Review“

执行相同操作

然后将jquery代码更改为以下内容：

$(document).ready(function(){

  $(".Review").click(function(){
    $(this).prev(".Quote").show();
    $(this).hide();
  });

  $(".Quote").click(function(){
    $(this).next(".Review").show();
    $(this).hide();
  });
});

ShowHide multiple li＆gt; blockquote #Quote

3 个答案: