Question

我正在尝试创建一个切换元素，在单击外部元素时可以在网格和表格之间切换。然而，当“表格”和“表格”出现时，我的大多数功能都存在。 'grid'链接被多次选中，返回多个空div / tr。

如何在返回前防止这种情况发生？如果不是这样，那么我将如何隐藏空的返回元素？

请记住，这需要在IE8 +中兼容。

小提琴下面。谢谢。

$('.button-table').click(function () {
    $('.grid').replaceWith(function () {
        var html = '';
        $('div:first', this).each(function () {
            html += '<tr class="table-head">';
            $('div', this).each(function () {
                html += '<th>' + $(this).html() + '</th>';
            });
            html += '</tr>';
        });
        $('div:not(:first)', this).each(function () {
            html += '<tr>';
            $('div', this).each(function () {
                html += '<td>' + $(this).html() + '</td>';
            });
            html += '</tr>';
        });
        return '<table>' + html + '</table>';
    });
});

$('.button-grid').click(function () {
    $('table').replaceWith(function () {
        var html = '';
        $('tr', this).each(function () {
            html += '<div class="result three columns h-100">';
            $('th', this).each(function () {
                html += '<div>' + $(this).html() + '</div>';
            });
            $('td', this).each(function () {
                html += '<div>' + $(this).html() + '</div>';
            });
            html += '</div>';
        });
        return '<div class="grid">' + html + '</div>';
    });
});

Answer 1

好的，所以我能够在使用jQuery的同时解决这个问题。唯一的CSS依赖部分是：

.grid .result:first-child {display:none;}

这会从网格视图中隐藏TH标记的项目。

否则，我所要做的就是在表格按钮的切换中添加一个IF语句并添加一个额外的变量（innerHtml）。

以下是修复小提琴的最终代码和链接：

http://jsfiddle.net/rymill2/R3J5m/

$('.button-table').click(function() {
    $('.grid').replaceWith(function() {
        var html = '';
        $('div:first', this).each(function() {
            html += '<tr class="table-head">';
            $('div', this).each(function() {
                html += '<th>' + $(this).html() + '</th>';
            });
            html += '</tr>';
        });   
        $('div:not(:first)', this).each(function() {
            var innerHtml = '';
            $('div', this).each(function() {
                innerHtml += '<td>' + $(this).html() + '</td>';
            });
            if (innerHtml != '') {
            html += '<tr>' + innerHtml + '</tr>';
            }
        });
        return '<table>' + html + '</table>'; 
    });
});

$('.button-grid').click(function() {
    $('table').replaceWith(function() {
        var html = '';      
        $('tr', this).each(function() {
            html += '<div class="result three columns h-100">';
            $('th', this).each(function() {
                html += '<div>' + $(this).html() + '</div>';
            });
            $('td', this).each(function() {
                html += '<div>' + $(this).html() + '</div>';
            });
            html += '</div>';
        });
        return '<div class="grid">' + html + '</div>';
    });
});

隐藏/阻止空的退回项目

1 个答案: