2013-09-23 35 views
26

Tôi không phải là một lập trình viên nhưng tôi thích xây dựng nguyên mẫu. Tất cả kinh nghiệm của tôi đến từ actionScript2.jQuery '.each' và đính kèm '.click' sự kiện

Đây là câu hỏi của tôi. Để đơn giản hóa mã của tôi, tôi muốn tìm ra cách đính kèm các sự kiện '.click' vào các sự kiện đã tồn tại trong cơ thể HTML.

<body> 
<div id="dog-selected">dog</div> 
<div id="cat-selected">cat</div> 
<div id="mouse-selected">mouse</div> 

<div class="dog"><img></div> 
<div class="cat"><img></div> 
<div class="mouse"><img></div> 
</body> 

của tôi (thất bại) chiến lược là:
1) thực hiện một mảng của các đối tượng:

var props = { 
"dog": "false", 
"cat": "true", 
"mouse": "false" 
}; 

2) lặp qua mảng với '.each' và làm tăng thêm mỗi div hiện với một ' .click 'sự kiện. Cuối cùng, tạo một biến cục bộ.

đây là một mẫu thử nghiệm:

$.each(props, function(key, value) {  
$('#'+key+'-selected').click(function(){ 
var key = value; 
}); 
}); 
+2

Có phải [this] (http://jsfiddle.net/Jwqfg/) những gì bạn đang tìm kiếm không? – karthikr

+1

Điều đó dường như hoạt động, vấn đề là gì? http://jsfiddle.net/PV7Gj/ –

+1

Mã của bạn đã làm mọi thứ được mã hóa để thực hiện. bạn có thực sự muốn làm điều gì đó với biến quan trọng bên trong sự kiện nhấp chuột không? –

Trả lời

53

Một giải pháp bạn có thể sử dụng là gán một lớp tổng quát hơn đối với bất kỳ div bạn muốn xử lý sự kiện nhấp chuột ràng buộc để.

Ví dụ:

HTML:

<body> 
<div id="dog" class="selected" data-selected="false">dog</div> 
<div id="cat" class="selected" data-selected="true">cat</div> 
<div id="mouse" class="selected" data-selected="false">mouse</div> 

<div class="dog"><img/></div> 
<div class="cat"><img/></div> 
<div class="mouse"><img/></div> 
</body> 

JS:

$(".selected").each(function(index) { 
    $(this).on("click", function(){ 
     // For the boolean value 
     var boolKey = $(this).data('selected'); 
     // For the mammal value 
     var mammalKey = $(this).attr('id'); 
    }); 
}); 
+1

Thú vị bạn có thể bao gồm các biến trong div's? HTML có hợp lệ không? Cảm ơn tất cả các thành viên đầu vào! Trong hành động viết mẫu thử nghiệm này và đăng bài tôi dường như đã làm việc ra vấn đề. Thật vậy nó wort tốt! nhưng cảm ơn tất cả vì những đóng góp của bạn! – hcc

+1

Đây không phải là quá nhiều biến, như là thuộc tính. Id và class khá chuẩn, nhưng bạn có thể nối thêm data- {name} vào các phần tử và truy cập nội dung với $ (this) .data ('{name}'); Đây là html5 hợp lệ. –

+0

Wow Man, làm việc thích một sự quyến rũ, giải pháp đơn giản và tuyệt vời !!! –

10

Không cần phải sử dụng .each. click đã liên kết với tất cả các lần xuất hiện div.

$('div').click(function(e) { 
    ..  
}); 

See Demo

Lưu ý: sử dụng khó tính ràng buộc như .click để đảm bảo yếu tố nạp tự động không bị ràng buộc.

+2

Đây phải là câu trả lời, trừ khi bạn cần chỉ mục từ câu trả lời ở trên. – Tunn

+0

Có nhưng điều đó sẽ không hoạt động trên lưu trữ khi bạn có một nút trên mỗi mục nhập. – Dev

+0

@Oriol là đúng, cách khác là sử dụng hàm on() 'jQuery. Bằng cách này, nó sẽ hoạt động với nội dung được tải động. – another

Các vấn đề liên quan