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

我在foreach循环中有2个div。第一个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>

并想更改显示更多链接以显示更少。

来源

2013-01-11 nohan

我编辑了自己的冠军。请参阅：“[应该在其标题中包含”标签“]（http://meta.stackexchange.com/questions/19190/）”，其中的共识是“不，他们不应该”。 –

在循环添加父<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() ..更换点击链接中的文本或U可以使用text()

来源

2013-01-11 13:21:06 bipen

更新检查出来.. – bipen

thanx男人....不错。但是如果我想要隐藏第二个div并再次显示第一个div，那么我该如何检查我发送给您的那个网站。 – nohan

更新..试试吧... – bipen

试试这个，如果你不希望添加进一步DIV元素

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

来源

2013-01-11 13:17:25 algorhythm

更改代码这样

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

来源

2013-01-11 13:18:16 Samyak

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

来源

2013-01-11 13:18:16 Paul

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

回答

相关问题