gpt4 book ai didi

javascript - 如果一个或两个盒子打开/关闭,打开/关闭其余部分(如果所有打开,关闭所有)

转载 作者:可可西里 更新时间:2023-11-01 13:05:50 25 4
gpt4 key购买 nike

这个很棘手!我在这上面花了好几个小时,在 Stackoverflow 上找不到任何类似的东西,可能是因为我不确定要搜索什么。

问题:

  1. 在一个容器中,我有 3 个盒子,每个盒子都有一个打开/关闭切换按钮 - 可以单独切换它们 - 它工作正常。

  2. 我在容器外有一个“全部打开-关闭”按钮,它应该能够打开剩余的框(如果 1 或 2 个已经打开) 或者如果全部/或没有是打开的,它应该打开/关闭它们。

我的代码几乎完成了我需要的所有事情(如果打开了 1 或 2 个框,然后单击“全部打开-关闭”,其余的打开),如果所有框都关闭,则打开-关闭打开它们一次全部。

唯一不起作用的是如果所有框都打开,我希望能够通过单击“打开-关闭所有”一次关闭它们。

http://codepen.io/StrengthandFreedom/pen/ZbrvOO

$('.small-box-button').on('click', function(){
event.preventDefault();
$(this).next('.small-box').toggleClass('is-visible');

});

// Open / Close all / remainders
$('.open-close-all-button').on('click', function(){
event.preventDefault();

if ($('.small-box').is(':visible')) {
// then open the small boxes that are not open yet (the remainders)
$('.small-box').siblings().addClass('is-visible');
// $(this).next('.small-box').toggleClass('is-visible');
}
//not sure what to do here...
else ($('.small-box').not(':visible'))
$('.small-box').siblings().addClass('is-visible');
});

我认为我需要使用更多 if else 条件并检查值 (如 if isVisible >= 1 || 2 ) 但不确定如何编写。我觉得这可以写得更简单。

非常感谢一些指导,我已尽力使该示例尽可能易于查看。

谢谢! :-)

最佳答案

我认为您的解决方案非常简单。基本上,您要做的是检查当用户单击网站框外的主按钮时显示的元素数。看看下面:

//打开/关闭所有框 $('.open-close-all-button').on('click', function(){ event.preventDefault();

var numOfItems = $('.is-visible').length;

if(numOfItems > 1){ //Add the case you need
//Remove all the .is-visible
}else{
//Add to all the boxes .is-visible
}

});

另外我建议你封装你的代码:

$(document).ready(function(){
// Toggle individual boxes when clicking on buttons inside container
$('.small-box-button').on('click', function(){
event.preventDefault();
$(this).next('.small-box').toggleClass('is-visible');

});
// Open/close all boxes
$('.open-close-all-button').on('click', function(){
event.preventDefault();

var numOfItems = $('.is-visible').length;

if(numOfItems > 1){ //Add the case you need
//Remove all the .is-visible
}else{
//Add to all the boxes .is-visible
}
});
});

关于javascript - 如果一个或两个盒子打开/关闭,打开/关闭其余部分(如果所有打开,关闭所有),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33299265/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com