jQuery kết hợp các câu lệnh?

Question

Làm thế nào tôi có thể đơn giản hóa các báo cáo này, thay vì phải đếm tất cả các cách UPT đến 34 và có 34 báo cáo riêng biệt ... ..

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

hiệu quả hơn vì nó sử dụng delegate()/live(). Thay vì gắn nhiều trình xử lý nhấp chuột, một trình xử lý duy nhất được đặt trên nút tổ tiên chung, các sự kiện nhấp chuột sẽ phát sinh đến.

Là @rochal pointed out, thậm chí thích hợp hơn có thể là sử dụng tên lớp đơn cho tất cả các phần tử và tận dụng mối quan hệ giữa hai phần tử (qua cha/etc). Tuy nhiên, nếu có thể, bạn vẫn nên xem xét sử dụng trực tiếp() hoặc đại biểu() cho người xử lý.

Answer 2

Thêm một className chung cho mọi phần tử:

<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> 
... 

Sau đó, bạn có thể đơn giản hóa HTML của bạn, và thoát khỏi ID tất cả cùng nhau:

<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> 
... 

Sau đó, tất cả các bạn phải làm là :

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

Node về nhận xét của tôi trong các mã:

tôi cho rằng #timeline-2010-[X] là một số loại div bạn muốn hiển thị, vì vậy thay vì sử dụng ID một lần nữa, áp dụng một lớp học và sử dụng .siblings() hay .find(), vv

Answer 3

Chừng nào bạn đang sử dụng jQuery, hãy thử một cái gì đó như này:

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

Điều này sẽ lấy tất cả các liên kết có thuộc tính id bắt đầu bằng "timeline-2010-lnk" và đính kèm sự kiện nhấp chuột. Bạn nhận được id tương ứng bằng cách loại bỏ phần "lnk" khỏi id của liên kết.

Dưới đây là một doc cho "thuộc tính bắt đầu với" selector: http://api.jquery.com/attribute-starts-with-selector/

Thêm vào đó, đây là một bản demo đơn giản cho thấy phương pháp này trong hành động: http://jsfiddle.net/eL3Yw/

Answer 4

Bạn có thể sử dụng một vòng lặp for như Luca đề xuất trước đó (xóa). Nhưng bạn phải tạo một trợ giúp "chức năng tự gọi" để giữ mọi thứ đúng:

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

Tại sao lại như vậy? Javascript chỉ có function scope và không phải là block scope như trong hầu hết các ngôn ngữ khác của C. Vì vậy, i không bị ràng buộc trong phạm vi của for-loop THÌ TRƯỚC KHI closure functions bạn đang tạo thành trình xử lý sự kiện cho click sẽ tham chiếu đến cùng một số i.

Bằng cách tạo một hàm mới tự gọi khi chạy, bạn có thể khắc phục sự cố này.

Answer 5

Sử dụng bộ chọn thuộc tính starts with with $.mỗi

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