替换'全部显示'按钮，带有'少透露'单击

Replace 'Reveal All' button with 'Reveal Less' onClick?

本文关键字：透露 单击 带有 显示 全部 替换 按钮      更新时间：2023-09-26

我当前正在表上使用"全部显示"按钮来显示所有表条目：

http://jsfiddle.net/SCpgC/

然而，我想知道，有没有一种方法可以在单击时将"全部显示"切换为显示"较少显示"，这样用户就可以返回到以前的视图？

以下是我当前使用的JavaScript：

var numShown = 2; // Initial rows shown & index
    $(document).ready(function() {
        // Hide rows and add clickable div
        $('table').find('tr:gt(' + (numShown - 1) + ')').hide().end().after('<div class="more">Reveal All</div>');
        $('.more').click(function() {
            var numRows = $(this).prev().find('tr').show();
            $(this).remove();
        })
    });

非常感谢任何指针：-(

这将双向工作。。。如果显示所有，则会显示div；如果explore less则会隐藏div

试试这个

$('.more').click(function() {
    if ($(this).hasClass("show")) {
        var numRows = $(this).prev().find('tr').show();
        $(this).text('Reveal Less');
        $(this).removeClass('show').addClass('hide');
    }
    else {
        $(this).prev().find('tr:gt(' + (numShown - 1) + ')').hide();
        $(this).removeClass('hide').addClass('show');
        $(this).text('Reveal All');
    }
});

并利用CCD_ 1和CCD_

具有效果的fiddel

试试这个：

var numShown = 2; // Initial rows shown & index
$(document).ready(function() {
    // Hide rows and add clickable div
    $('table').find('tr:gt(' + (numShown - 1) + ')').hide().end().after('<div class="more">Reveal All</div>');
    $('.more').on('click',function() {
        if ($(this).text()=="Reveal All") {
         $(this).prev().find('tr:gt(' + (numShown - 1) + ')').show();
            $(this).text("Reveal less");
        } else {
           $(this).prev().find('tr:gt(' + (numShown - 1) + ')').hide();
            $(this).text("Reveal All");
        }
    });
});

http://jsfiddle.net/SCpgC/4/

UPDATE：这应该会将表返回到以前的状态(不会隐藏所有内容(。还添加了.on((方法而不是.click((

var numShown = 2; // Initial rows shown & index
var hideText = 'Hide all';
var revealText = 'Reveal all';
$(document).ready(function() {
    // Hide rows and add clickable div
    $('table').find('tr:gt(' + (numShown - 1) + ')').hide().end().after('<div class="more">' + revealText + '</div>');
    var numRows;
    $('.more').toggle(function() {
        numRows = $(this).prev().find('tr').show();
        $(this).text(hideText);
    }, function() {
        numRows = $(this).prev().find('tr').hide();
        $(this).text(revealText);
    });
});

编辑：对不起，忘记了切换不适用于实时/在上

我认为这段代码应该可以工作：

var numShown = 2; // Initial rows shown & index
$(document).ready(function() {
    // Hide rows and add clickable div
    $('table').find('tr:gt(' + (numShown - 1) + ')').hide().end().after('<div class="more">Reveal All</div>');
    $('.more').click(function() {
        if ($(this).text()=="Reveal All") {
            $('table').find('tr:gt(' + (numShown - 1) + ')').show();
            $(this).text("Reveal less");
        } else {
            $('table').find('tr:gt(' + (numShown - 1) + ')').hide();
            $(this).text("Reveal All");
        }
    });
});
相关文章：