0

さて、次のようなテーブルがあるとしましょう。

<table class="first-table" border="1" width="400px">
   <tr>
       <td><?php echo $row_cond['title']; ?></td>
       <td><a class="more" href="#" onClick="slideup()">Display More</a></td>
   </tr>
   <tr class="full_result">
       <td colspan="2"><?php echo $row_cond['description']; ?></td>
   </tr>
</table>

slideUp()クリックすると関数を呼び出して「full_result」クラスでtrを表示または非表示にするリンクがあることがわかります。

var command = false;
function slideup() { //New function SlidUp
    if (command == false){
         $('.full_result').fadeIn();
         $('.more').text('Display More');
         command = true;
    }else{
         $('.full_result').hide();
         $('.more').text('Display Less');
         command = false;
    }
}

つまり、トリックは、これがwhileループ内にあり、何度も繰り返されることです。では、リンクをクリックすると、リンクをクリックしたテーブルにクラス「full_result」のみが表示されるようにするにはどうすればよいですか。

テーブルのボタンをクリックすると、すべてのクラスが同時に表示および非表示になります。

私の解決策

$('.full_result').hide();
$(".more").on("click",function(){
    $('.more').html('Display More');
    $('.full_result').hide();
    $(this).parents("tr").next().next().fadeIn();
    $(this).html('');
    return false; //This stops the page jumping to the top of the page when I click the link
});
4

4 に答える 4

1

この方法で JS コードを変更し、「.more」リンクから「onClick」属性を削除してみてください。

var command = false;
$(".more").on("click",function(){
    if (command == false){
         $(this).parents("tr").next().fadeIn();
         $(this).html('Display Less');
         command = true;
    }else{
          $(this).parents("tr").next().hide();
         $(this).html('Display More');
         command = false;
    }
});

jsfiddleを参照してください

編集

行 " " の下に複数の行がある場合は、次のすべての行を表示/非表示にするために.more使用できます。.nextAll()そして、.slideToggle()「」の使用を避けるために使用するだけvar commandです。このコード:

$(".more").on("click",function(){    
         $(this).parents("tr").nextAll().fadeToggle();
         if($(this).html()=="Display More") $(this).html('Display Less');            
         else $(this).html('Display More');
});

新しいJSFiddleを参照

于 2012-09-06T07:32:17.840 に答える
0

ここにあなたが試すことができるものがあります：

$('.more').on('click',function(){
    var text = $(this).text() === "Display More" ? "Display Less" : "Display More";
    $(this).text(text)
           .closest('table').children('.full_result').fadeToggle();
});
于 2012-09-06T08:07:31.887 に答える
0

これを試して

HTML コード

<table class="first-table" border="1" width="400px">
   <tr>
       <td><?php echo $row_cond['title']; ?></td>
       <td><a class="more" href="#">Display More</a></td>
   </tr>
   <tr class="full_result">
       <td colspan="2"><?php echo $row_cond['description']; ?></td>
   </tr>
</table>

JS コード

$('.more').on('click', function(){
    slideup();

});
var command = true;
function slideup() { //New function SlidUp
    alert('ok');
    if (command == true){
         $('.full_result').fadeIn(400);
         $('.more').text('Display More');
         command = false;
    }else{
         $('.full_result').hide();
         $('.more').text('Display Less');
         command = true;
    }
}
于 2012-09-06T07:37:36.787 に答える
0

テーブルに共通のクラスを作成し、以下のように必要な tr を参照できます。

1) table タグにいくつかの共通クラスがあります。例:
2) スクリプトは次のようになります。これにより、インライン関数を呼び出す必要はありません。

$(document).on('click', '.tr-hidable .more',function(){
  if (command == false){
    $(this).parents('tr-hidable').first().find('full-result').fadeIn();
    $(this).text('Display More');
    command = true;
  }else{
    $(this).parents('tr-hidable').first().find('full-result').fadeOut();
    $(this).text('Display Less');
    command = false;
  }
});

または、動的要素がない場合は、スクリプトの最初の行を次の行に置き換えることができ、すべてのリマイニング スクリプトは同じままです。

$('.tr-hidable .more').on('click',function(){

それが役に立てば幸い！

于 2012-09-06T07:32:42.783 に答える