Question

if ($('#menutx').is(':visible')){ 
    $('#menutx').addClass('tohide');
}

$('.tohide').hide();
//some code...
$('.tohide').show();

所以，if visible，我在执行某些代码时隐藏了一些元素如何为多个元素执行此操作？
其他元素是#panelb, #menut, #slidet, .linegold, #btnlines, #footerwrap, #alert.

Answer 1

我不知道这正是你想要的。最初一些元素被隐藏，一些元素正在显示。根据visiblity，它检查并显示隐藏的，隐藏显示一个。请参阅demo.good运气的例子。

＆＃13;

<html>
<head></head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style>

ul li{
	list-style-type: none;
}

ul li a {
	text-decoration: none;
	color: black;
	font-size: 20px;
	font-family: monospace;
}

</style>

<body>

<ul class="mymenu">
	<li><a href="" id="id0">HOME</a></li>
	<li><a href="" id="id1">HOME1111</a></li>
	<li><a href="" id="id2">HOME2222</a></li>
	<li><a href="" id="id3" style="display:none">HOME3333</a></li>
	<li><a href="" id="id4">HOME4444</a></li>
	<li><a href="" id="id5">HOME9999</a></li>
	<li><a href="" id="id6" style="display:none">HOME8888</a></li>
	<li><a href="" id="id7" style="display:none">HOME7777</a></li>
	<li><a href="" id="id8">HOME6666</a></li>
</ul>

<button id="show">Show Hidden</button> || <button id="hide">Hide Showing</button>

<script type="text/javascript">

$("#show").click(function(){
	var thelength = $("ul.mymenu").children().length;
	for(var i=0;i<thelength;i++)
	{
		var checkvisible = $("ul.mymenu li #id"+i).is(':visible');
		if (checkvisible == true) 
			{
				$("ul.mymenu li #id"+i).hide(500);
			}
		else
		{
			$("ul.mymenu li #id"+i).show(1000);

		}
	}
	
});


$("#hide").click(function(){
	var thelength = $("ul.mymenu").children().length;
	for(var i=0;i<thelength;i++)
	{
		var checkvisible = $("ul.mymenu li #id"+i).is(':visible');
		if (checkvisible == true) 
			{
				$("ul.mymenu li #id"+i).hide(500);
			}
		else
		{
			$("ul.mymenu li #id"+i).show(1000);

		}
	}
	
});


</script>
</body>

</html>

＆＃13;

Answer 2

您可以添加数组中的所有元素并循环遍历它们：

var list=['#panelb', '#menut', '#slidet', '.linegold', '#btnlines', '#footerwrap', '#alert'];

$.each(list,function(){
    if($(this).is(':visible')){
      $(this).removeClass('toshow').addClass('tohide'); // Be sure to remove `toshow` class
    }      
})

Answer 3

使用此：

$(document).ready(function(){

    $("#menutx,#panelb, #menut, #slidet, .linegold, #btnlines, #footerwrap, #alert").each(function(){

        if ($(this).is(':visible'))

            $(this).addClass('tohide');

    })
})

您可以删除addClass并仅使用hide和show。

示例：

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #menutx,#panelb {
            position: absolute;
            top: 50px;
        }
        #panelb {
            left: 200px;
            display: none;
        }
    </style>
</head>
    <body>
        
        <ul id="menutx">
             <li>menutx-Item1</li>
             <li>menutx-Item2</li>
             <li>menutx-Item3</li>
             <li>menutx-Item4</li>
        </ul>
        
        <ul id="panelb">
            <li>panelb-item1</li>
            <li>panelb-item2</li>
            <li>panelb-item3</li>
        </ul>

        <button>Click Me!</button>

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      
        <script>
          
$(document).ready(function(){
    
    $("button").on("click",function(){
        
        $("#menutx,#panelb, #menut, #slidet, .linegold, #btnlines, #footerwrap, #alert").each(function(){
        
        if ($(this).is(':visible'))
            
            $(this).hide(500);
            
        else
            
            $(this).show(500);
            
        })
        
    })
})
            
        </script>
    </body>
</html>

＆＃13;

如果每个元素都可见，则隐藏/显示多个元素

3 个答案: