0

foreach ループ内に 2 つの div があります。最初の div には会社に関する情報がありますが、短縮された形式であり、2 番目の div には会社に関する完全な形式の情報があります。その会社の「もっと見る」リンクがクリックされたときに最初のdivを非表示にして2番目の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>

show more リンクを show less に変更したい。

4

4 に答える 4

2

ループに親を追加して、<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()を使用できます

于 2013-01-11T13:21:06.877 に答える
0

この方法でコードを変更します

<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-11T13:18:16.400 に答える
0 
$(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-11T13:18:16.927 に答える
0

これ以上 DIV 要素を追加したくない場合は、これを試してください

<script type="text/javascript">
    $(document).ready(function(){
        $(".show_details").click(function(){
            $(this).prev().show();
            $(this).prev().prev().hide();
        });
    });
</script>
于 2013-01-11T13:17:25.180 に答える