jquery - 单击与该公司相关的“显示更多”链接时显示 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");
        });
    });
});