javascript - 如何通过参数在单个jquery函数中隐藏多个html元素

Question

HTML:

<div id="a1">12345</div>
<div id="a2">6789</div>
<h1 id="a3">asdffgg</h1>
<a href="#" id="a4" >go</a>
<p id="a5">jklo</p>
<h4 id="a6">just</h4>
<button id="btn" onclick="hide();">hide</button> 

JS:

<script> function hide(){ ....? } </script>

以上是我的代码......

如何通过参数隐藏选定的元素例如onclick="hide(a5,a6,a4);"请帮我...谢谢..

Answer 1

将它们作为一个字符串发送，例如“a5,a6,a4”，然后使用split()/join()将它们解析为多ID的选择器，例如:

$('#' + selectors.split(',').join(',#')).hide();

否则，对要隐藏的所有元素使用通用类，并将其用作选择器，如下所示:

$('.common_class').hide();

代码:

function hide(selectors) {
  $('#' + selectors.split(',').join(',#')).hide(); //Selector will be '#a5,#a6,#a4'
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btn" onclick="hide('a5,a6,a4');">hide</button>
<div id="a1">12345</div>
<div id="a2">6789</div>
<h1 id="a3">asdffgg</h1>
<a href="#" id="a4">go</a>
<p id="a5">jklo</p>
<h4 id="a6">just</h4>