jQuery结合语句？

我如何可以简化这些语句，而不必一路数UPT至34有34条分开的语句......jQuery结合语句？

$('a#timeline-2010-lnk1').click(function() { 
    $('#timeline-2010-1').show(); 
    return false; 
    }); 

$('a#timeline-2010-lnk2').click(function() { 
    $('#timeline-2010-2').show(); 
    return false; 
    }); 

$('a#timeline-2010-lnk3').click(function() { 
    $('#timeline-2010-3').show(); 
    return false; 
    }); 

$('a#timeline-2010-lnk4').click(function() { 
    $('#timeline-2010-4').show(); 
    return false; 
    });

来源

2010-09-03 tony noriega

能否请您提供时间轴-2010-lnk1和时间轴-2010-1的简化HTML，包括这两个元素和任何父节点之间的关系？ – rochal 2010-09-03 16:12:40

$("a[id^=timeline-2010-lnk]").live("click", function() { 
    var num = this.id.split(/-(?:lnk)?/).pop(); 
    $('#timeline-2010-'+num).show(); 
    return false; 
});

更有效，因为它使用delegate()/live()。而不是附加许多点击处理程序，一个处理程序放置在共同的祖先节点上，这些点击事件将起泡。

作为@rochal pointed out，更合适的做法可能是对所有元素使用单个类名，并利用两个元素之间的关系（通过父/ etc）。但是，如果可以，则应该考虑使用live（）或委托（）作为处理程序。

来源

2010-09-03 16:00:51

不错的答案！正在使用更有效的类选择器的id^=选择器？ – Patricia 2010-09-03 16:23:47

@Patricia：不多。如果你可以上课，这可能是一个更好的主意 - 但* live（）*仍然比许多* click（）*处理程序更有效率（这是我的答案的重点）。 – 2010-09-03 16:28:10

右侧。谢谢:) – Patricia 2010-09-03 16:33:24

添加一个共同的类名的每个元素：

<a href="#" id="timeline-2010-lnk1" class="clicker">Text 1</a> 
<a href="#" id="timeline-2010-lnk2" class="clicker">Text 2</a> 
<a href="#" id="timeline-2010-lnk3" class="clicker">Text 3</a> 
<a href="#" id="timeline-2010-lnk4" class="clicker">Text 4</a> 
<a href="#" id="timeline-2010-lnk5" class="clicker">Text 5</a> 
...

然后，你可以简化你的HTML，并摆脱ID的所有一起：

<a href="#" class="clicker">Text 1</a> 
<a href="#" class="clicker">Text 2</a> 
<a href="#" class="clicker">Text 3</a> 
<a href="#" class="clicker">Text 4</a> 
<a href="#" class="clicker">Text 5</a> 
...

然后，所有你需要做的就是：

：

$('.clicker').click(function() { 
    $(this). /* parent? sibling? I'd have to see your code */ .show(); 
    return false; 
});

关于我的代码注释节点0

我认为#timeline-2010-[X]是某种形式的div要显示，这样反而再次使用的ID，应用类，并使用.siblings()或.find()等

来源

2010-09-03 16:01:20 rochal

只要你使用jQuery，你可以试试这个：

$('a[id^=timeline-2010-lnk]').click(function() { 
    var id = '#' + this.id.replace(/lnk/, ''); 
    $(id).show(); 
    return false; 
});

这将抓住id属性以“timeline-2010-lnk”开头的所有链接并附加一个click事件。您只需从链接的ID中删除“lnk”部分即可获得相应的ID。

这里有一个文档的选择“属性开头”：http://api.jquery.com/attribute-starts-with-selector/

此外，这里的显示操作这种方法的简单演示：http://jsfiddle.net/eL3Yw/

来源

2010-09-03 16:05:40 Ender

您可以使用for循环像Luca建议早期（删除）。但你必须创建一个帮手“自我调用功能”，以保持正确：

for(var i=1; i<=34; i++) { 
    (function(index){ 
     $('a#timeline-2010-lnk'+index).click(function() { 
      $('#timeline-2010-'+index).show(); 
      return false; 
     }); 
    })(i); 
}

这是为什么？ Javascript只有function scope而不是像大多数其他类似C语言的block scope。因此i未被绑定到for-loop的范围，因此您创建的作为事件处理程序的到click都将引用相同的i。

通过创建一个在运行时自行调用的新函数，您可以解决此问题。

来源

2010-09-03 16:07:36 jAndy

是的，总是忘记这个.. +1 – 2010-09-03 16:09:14

你关闭'''关闭是错误的。我做了一个编辑，但它被您最近的编辑覆盖。我认为这只是一个疏忽。：O） – user113716 2010-09-03 16:16:47

对$使用startswith属性选择器。每个

$('a[id^=timeline-2010-lnk]').each(function() { 
    var idx = $(this).attr('id').match(/\d+$/); 

    if (idx !== null) { 
     $(this).click(function() { 
      $('#timeline-2010-' + idx[0]).show(); 
      return false; 
     }); 
    } 
});

来源

2010-09-03 16:18:57 Imran

jQuery结合语句？

回答

相关问题