Question

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

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

基本上，如果容器中的一个元素被隐藏，我想要一个重置按钮出现，如果没有删除那个重置按钮......

Answer 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以使用更常见的类，则可以将左侧和右侧的单独代码组合成一段公共代码。

Answer 2

隐藏.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();
       });
    }
});

重复右侧！

Answer 3

我最近尝试过使用CSS来做这些事情，如果你不想动画它，我觉得它很有效。这是一个jsfiddle我可以通过在两个模块的公共父级中添加/删除'hideLeft'或'hideRight'类来隐藏模块并一次显示重置按钮。

它的工作原理是首先隐藏两个重置按钮div。然后它使用.hideLeft #left { display:none;}和.hideLeft #right .resetLeft { display: block; }隐藏左侧模块，并在.hideLeft添加到两个元素都来自哪个元素时显示重置按钮。一段时间以来，我受到了现代化的启发，并认为这是一种巧妙的替代方式。让我知道你的想法，如果你觉得它有用，如果你有任何问题:)

检查Element hasClass然后prepend和Element

3 个答案: