Question

好的，所以说我有一张看起来像这样的表：

<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
});

Answer 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

Answer 2

你可以在桌子上有一个公共类，并参考下面所需的tr

1）在表格标签上有一些共同的类。例如：
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(){

希望，这有帮助！

Answer 3

试试这个

HTML CODE

<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 CODE

$('.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;
    }
}

Answer 4

您可以尝试以下方法：

$('.more').on('click',function(){
    var text = $(this).text() === "Display More" ? "Display Less" : "Display More";
    $(this).text(text)
           .closest('table').children('.full_result').fadeToggle();
});

当其他人具有相同的名称时，如何选择特定的类？

4 个答案: