0

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

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

我有一个带有 ID =“#bottomrightbox”的父 div 的网页。这个父“#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/

4

3 回答 3

1

您可能想使用正则表达式选择器。例如，您的代码可能如下所示：

$(':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 的评论，即您不应该以数字开头 id。

于 2012-04-21T03:43:52.630 回答
0

在没有看到您的 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 示例

更新

根据您的评论 JsFiddle 更新了 JsFiddle 示例

于 2012-04-21T03:46:29.817 回答
0

不确定您的 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>
于 2012-04-21T04:28:14.070 回答