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結合語句？

回答

相關問題