0

我在这里想要实现的是，当用户单击一个元素时，它会被隐藏，一旦发生这种情况，我想在包含元素内添加另一个元素，以使所有这些项目再次可见。

var checkIfleft = $('#left .module'),checkIfright = $('#right .module');
   if(checkIfleft.hasClass('hidden')) {
       $('#left').prepend('<span class="resetLeft">Reset Left</span>');
        } else if(checkIfright.hasClass('hidden')) {
          right.prepend('<span class="resetRight">Reset Right</span>');
       }

我尝试了多种方法，老实说，我相信.length ==1这是我最好的选择，因为我只希望添加一个元素。我相信上面的 JS 会在每次隐藏新项目时添加一个新元素（如果它有效）。

其他尝试：

var checkIfleft = $('#left .module').hasClass('hidden'),
    checkIfright = $('#right .module').hasClass('hidden');
   if(checkIfleft.length== 1) {
       $('#left').prepend('<span class="resetLeft">Reset Left</span>');
        } else if(checkIfright.length== 1) {
          right.prepend('<span class="resetRight">Reset Right</span>');
       } 
      else if(checkIfleft.length==0){
          $('.resetLeft').remove()
      } else if (checkIfright.length==0){
         $('.resetRight').remove()
      }

基本上，如果容器内的一个元素被隐藏，我希望出现一个重置按钮，如果不删除该重置按钮......

4

3 回答 3

1

hasClass()仅适用于集合中的第一项，因此它不会做您想要的。它不会告诉您是否有任何项目具有该类别。

你可以做这样的事情，而不是计算有多少隐藏项目，如果有 1 个或更多并且还没有重置按钮，那么你添加重置按钮。如果没有隐藏项目并且有一个重置按钮，则将其删除：

function checkResetButtons() {

    var resetLeft = $('#left .resetLeft').length === 0;
    var resetRight = $('#left .resetRight').length === 0;
    var leftHidden = $('#left .module .hidden').length !== 0;
    var rightHidden = $('#right .module .hidden').length !== 0;

    if (leftHidden && !resetLeft) {
        // make sure a button is added if needed and not already present
        $('#left').prepend('<span class="resetLeft">Reset Left</span>');
    } else if (!leftHidden) {
        // make sure button is removed if no hidden items
        // if no button exists, this just does nothing
        $('#left .resetLeft').remove();
    }

    if (rightHidden && !resetRight) {
        $('#right').prepend('<span class="resetRight">Reset Right</span>');
    } else if (!rightHidden) {
        $('#right .resetRight').remove();
    }

}

// event handlers for the reset buttons
// uses delegated event handling so it will work even though the reset buttons
// are deleted and recreated
$("#left").on("click", ".resetLeft", function() {
    $("#left .hidden").removeClass("hidden");
    $("#left .resetLeft").remove();
});

$("#right").on("click", ".resetRight", function() {
    $("#right .hidden").removeClass("hidden");
    $("#right .resetRight").remove();
});

仅供参考，如果我们可以更改 HTML 以使用更常见的类，那么左右的单独代码可以组合成一段通用代码。

于 2013-04-10T03:04:40.713 回答
0

隐藏时添加重置按钮.module，如果它不存在：

$('#left .module').on('click', function() {
    $(this).addClass('hidden');
    var parent = $(this).closest('#left');
    if ( ! parent.find('.resetLeft') ) {
       var res = $('<span />', {'class': 'resetLeft', text : 'Reset Left'});
       parent.append(res);
       res.one('click', function() {
           $(this).closest('#left').find('.module').show();
           $(this).remove();
       });
    }
});

重复右侧！

于 2013-04-10T03:04:52.080 回答
0

我最近尝试使用 CSS 来做一些这样的事情，我觉得如果你不尝试为它制作动画，它会很好地工作。这是一个jsfiddle，我可以在其中隐藏一个模块并通过向两个模块的共同父级添加/删除一个“hideLeft”或“hideRight”类来一次性显示重置按钮。

它首先隐藏两个重置按钮 div。然后它使用.hideLeft #left { display:none;}and.hideLeft #right .resetLeft { display: block; }来隐藏左侧模块，并.hideLeft在添加到两个元素所来自的任何元素时显示重置按钮。不久前，我受到了modernizr 的启发，并认为这是一种简洁的替代方式。让我知道你的想法，如果你觉得它有帮助，如果你有任何问题:)

于 2013-04-10T03:35:36.280 回答