顯示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當點擊該公司的「顯示更多」鏈接時

回答

相關問題