当点击与该公司相关的“显示更多”链接时，显示Div并隐藏其他Div

Question

我在foreach循环中有2个div。第一个div有关于公司但有缩短形式的信息，在第二个div中有关于公司的完整形式的信息。我希望隐藏第一个div并显示第二个div当该公司点击的“显示更多”链接时。在我的代码中，当我点击“显示更多”链接时，它显示所有公司不仅是我点击的公司。

<?php   
  $X         = 0;
  foreach($companyRows as $row){ ?>
  <div class="first" >
        echo "a company information shortend form"
      </div>
      <div class="second" style="display:none">
       echo "a company information full form"
       </div>
       <a class="show_details"> show more</a>                               
  <?php $X++;
  } ?>

这里是jQuery。我是jquery和php的新手。

<script type="text/javascript">
    $(document).ready(function(){
        $(".show_details").click(function(){
            $(".second").show();
            $(".first").hide();
        });
    });
</script>

并希望更改显示更多链接以显示更少。

Answer 1

在你的循环中添加一个父<div> ...以便所有这些html都保留在父div中...这样我们就可以使用parent() ..

<?php   
  $X         = 0;
   foreach($companyRows as $row){ ?>
   <div class="parentDiv"> //***here****
    <div class="first" >
      echo "a company information shortend form"
    </div>
     <div class="second" style="display:none">
       echo "a company information full form"
     </div>
     <a class="show_details show_more"> show more</a>    //updated 
 </div>                           
<?php $X++;
} ?>

<强> JQUERY *的修订 *

$(document).ready(function(){
    $(".show_details").click(function(){
        var $this=$(this);
        var $parent= $this.parent();
        if($this.hasClass('show_more')){
            $this.removeClass('show_more').addClass('show_less');

            $parent.find('.second').show(); //find parent div and div with second class inside that parent div
           $parent.find(".first").hide();
           $this.html('show Less');  // $(this).text('show Less');
        }else if($this.hasClass('show_less')){
            $this.removeClass('show_less').addClass('show_more');

            $parent.find('.second').hide(); //find parent div and div with second class inside that parent div
           $parent.find(".first").show();
           $this.html('show More');  // $(this).text('show Less'); 
        } 
    });
});    

html() ..替换点击链接中的文字，或者您可以使用text()

Answer 2

如果您不想添加其他DIV元素

，请尝试此操作

<script type="text/javascript">
    $(document).ready(function(){
        $(".show_details").click(function(){
            $(this).prev().show();
            $(this).prev().prev().hide();
        });
    });
</script>

Answer 3

以这种方式填充你的代码

<script type="text/javascript">
    $(document).ready(function(){
        $(".show_details").click(function(){
            var $parent=$(this).parent();
            $parent.find(".second").show();
            $parent.(".first").hide();
        });
   });
</script>

Answer 4

$(document).ready(function(){
    $(".show_details").click(function(){
        $(this).parent().find(".first").hide(100, function() {
            $(this).parent().find('.second').show(100);
            $(this).html(" show less").addClass("hide_details").removeClass("show_details");
        });
    });
});