在 jQuery 中，我如何编写一个动态函数来显示和隐藏具有不同 ID 的多个 div？答案

【问题标题】：In jQuery how do I write a dynamic function to show and hide multiple divs that have distinct IDs?在 jQuery 中，我如何编写一个动态函数来显示和隐藏具有不同 ID 的多个 div？
【发布时间】：2012-04-21 03:29:13
【问题描述】：

我知道这个问题是多余的，但我真的需要专家建议：

我在以下场景中以错误的方式使用 jQuery，希望尽可能多地提出建议以生成最有效的代码：

我有一个网页，其父 div 的 ID =“#bottomrightbox”。这个父“#bottomrightbox” div 包含一系列 div，其 ID 为“#20111”、“#20112”、“#20113”......

目前，我已经为这些 div（即 id #20111 的 div）中的每一个分配了一个链接（即 id 为 #link20111），单击该链接时会隐藏 #bottomrightbox div 的子项并显示特定的 div。所以我的代码如下所示，简单地响应每个链接的 onclick 函数，然后隐藏父 div 中的所有 div，并显示按名称分配给它的特定 div。我的问题是我有 40 多个带有特定链接的 div，这些链接遵循这种类型的命名顺序，所以我有重复的 jQuery 代码行，应该简化为一个处理这个过程的函数。 如果有人能告诉我一种编写 jQuery 函数的简单方法，我将不胜感激，该函数允许我在单击分配给它的链接时显示每个 div。

我的代码按以下方式工作：

链接 ID 为 #link20111 -> 单击 -> 隐藏 #bottomrightbox 的子项 -> 显示 ID 为 #20111 的 div

链接 ID 为 #link20112 -> 点击 -> 隐藏 #bottomrightbox 的子项 -> 显示 ID 为 #20112 的 div

链接 ID 为 #link20113 -> 点击 -> 隐藏 #bottomrightbox 的子项 -> 显示 ID 为 #20113 的 div

<script type="text/javascript">
$(document).ready(function () {

$('#link20111').click(function () {
$('#bottomrightbox').children().hide();
$('#20111').fadeIn(500);

});

$('#link20112').click(function () {
$('#bottomrightbox').children().hide();
$('#20112').fadeIn(500);

});

$('#link20113').click(function () {
$('#bottomrightbox').children().hide();
$('#20113').fadeIn(500);

});

});
</script>

非常感谢所有帮助。

这是此代码的示例/jsfiddle： http://jsfiddle.net/uhnxj/

【问题讨论】：

请考虑添加一些 HTML 作为示例或 jsfiddle 与您尝试实现的迭代
@RuiCarneiro 我不能 +1 你的评论吗..
对于初学者来说，id 不能以数字开头。你应该首先解决这个问题。
如需帮助确定可用于 ID 的内容，请参阅 What are valid values for the id attribute in HTML?
这里是 jsfiddle：jsfiddle.net/uhnxj

标签： jquery show-hide html

【解决方案1】：

您可能想使用regular expression selector。例如，您的代码可能如下所示：

$(':regex(id,link)').click(function() {
    var link_id = $(this).attr('id');
    var id = link_id.replace(/^link/, '');
    $('#bottomrightbox').children().hide();
    $('#' + id).fadeIn(500);
});

请参阅以下jsfiddle。但是，我也赞同@SenorAmor 的评论，即您不应该以数字开头。

【讨论】：

【解决方案2】：

不确定您的 HTML，但这会起作用。我还添加了一条警报，您可以取消注释。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<a href="javascript:void(0);" class="someclass" id="20111">20111</a><br />
<a href="javascript:void(0);" class="someclass" id="20112">20112</a><br />
<a href="javascript:void(0);" class="someclass" id="20113">20113</a><br />
<a href="javascript:void(0);" class="someclass" id="20114">20114</a><br />

<div id="bottomrightbox">
<div id="20111">apples</div>
<div id="20112">oranges</div>
<div id="20113">banana</div>
<div id="20114">lemon</div>
</div>

<script type="text/javascript">
$('.someclass').click(function(){
var divid = this.id;
// alert(divid);
$('#bottomrightbox').children().not('#'+divid).hide();
});
</script>

【讨论】：

点击两个不同的按钮，所有的水果都会消失

【解决方案3】：

没有看到您的 HTML，如果您的 HTML 看起来像（并更新）：

<div id="buttoncollection">
 <div id="link20111" class="button">button 20111</div>
 <div id="link20112" class="button">button 20112</div>
 <div id="link20113" class="button">button 20113</div>
</div>

<div id="bottomrightbox">
 <div class="link20111">link20111</div>
 <div class="link20112">link20112</div>
 <div class="link20113">link20113</div>
</div>

那么你可以轻松做到：

<script type="text/javascript">
$(document).ready(function () {

  $('#bottomrightbox').children().hide();

  $('#buttoncollection .button').click(function (event) {
    $('#bottomrightbox').children().hide();
    $('#bottomrightbox .' + event.target.id).fadeIn(500);
  });
});

JsFiddle Example

更新

Updated JsFiddle Example based on your comment JsFiddle

【讨论】：