Question

我如何简化这些陈述，而不是一直计算到34并且有34个单独的陈述...... ..

$('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;
  });

Answer 1

$("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，更合适的可能是为所有元素使用单个类名，并利用两个元素之间的关系（通过父/等）。但是，如果可以，您仍应考虑使用 live（）或 delegate（）作为处理程序。

Answer 2

为每个元素添加一个公共className：

<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;
});

关于我在代码中的评论的节点：

我认为#timeline-2010-[X]是您想要展示的某种div，因此不要再使用ID，而是应用一个类并使用.siblings()或.find()等。

Answer 3

您可以使用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);
}

为什么？在大多数其他类C语言中，Javascript只有function scope而不是block scope。因此，i并未绑定for-loop closure functions的范围，因为click的事件处理程序将i引用{{1}} {{1}}

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

Answer 4

只要您使用jQuery，请尝试以下方法：

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

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

以下是“属性以...开头”选择器的文档：http://api.jquery.com/attribute-starts-with-selector/

此外，这是一个简单的演示，展示了这个方法：http://jsfiddle.net/eL3Yw/

Answer 5

使用带有$ .each

的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;
        });
    }
});

jQuery结合语句？

5 个答案: