chức năng Binding đến nhiều yếu tố với Jquery

Tôi có vấn đề nhỏ này với jquery: tôi cần phải làm một cái gì đó như thế này:chức năng Binding đến nhiều yếu tố với Jquery

$(document).ready(function(){ 
    links = {}; 
    links.a = "Link a"; 
    links.b = "Link b"; 
    links.c = "Link c"; 

    for (x in links){ 
     $("#" + x).css("border","1px solid #000"); 
     $("#" + x).click(function(){ 
      alert(x); 
     }); 
    } 
}); 
</script> 
<div id="a">a</div><br /> 
<div id="b">b</div><br /> 
<div id="c">c</div><br />

Vì vậy mà khi bạn click vào div # là bạn sẽ nhận được "Liên kết" alert , "Liên kết b" trên div # b và cứ thế ... Vấn đề là nếu bạn chạy mã này, việc nhấp vào từng phần tử sẽ cho cảnh báo ("Liên kết c") là kết quả, dường như chỉ có biến thể hàm cuối cùng được gán cho mỗi div ...

Tất nhiên tôi có thể hack bằng cách chỉnh sửa hàm để làm việc với id của div và sử dụng $ (this), nhưng đối với cursiosity: có cách nào để làm cho chu kỳ này hoạt động không? Bằng cách tạo và gán một hàm mới cho từng phần tử trong hàm?

Thx trước ...

Nguồn

2009-05-15 Alekc

Just FYI, đó là một chút gọn gàng nếu bạn chuỗi jQuery của bạn thay vì chọn lại chọn. * Ví dụ: * '$ ('#' + x) .css ('border', '1px solid # 000'). Bấm (fn); ' –

Sử dụng một đóng cửa: (a "này" Giải pháp là tao nhã hơn, nhưng tôi gửi bài này vì một câu trả lời đã được xóa đã có một giải pháp đóng cửa mà không làm việc)

$(document).ready(function(){ 
    links = {}; 
    links.a = "Link a"; 
    links.b = "Link b"; 
    links.c = "Link c"; 

    for (var x in links){ 
     $("#" + x).css("border","1px solid #000"); 
     $("#" + x).click(
      function(xx){ 
       return function() { alert(xx) }; 
      }(x) 
     ); 
    }; 
});

Nguồn

2009-05-15 14:49:58

Cảm ơn, đây là những gì tôi đang tìm kiếm :) – Alekc

Bạn cần sử dụng "cái này".

$(document).ready(function(){ 
    links = {}; 
    links.a = "Link a"; 
    links.b = "Link b"; 
    links.c = "Link c"; 

    for (var x in links){ 
     $("#" + x).css("border","1px solid #000"); 
     $("#" + x).click(function(){ 
       alert("Link "+this.id+" Alert!"); 
     }); 
    } 
});

Nguồn

2009-05-15 14:35:03 gradbot

<script type="text/javascript"> 
$(document).ready(function(){ 
    links = {}; 
    links.a = "Link a"; 
    links.b = "Link b"; 
    links.c = "Link c"; 

    for (x in links){ 
     $("#" + x).css("border","1px solid #000").click(function(){ 
       alert($(this).attr('id')); 
     }); 
    } 
}); 
</script> 

</head> 

<body> 

<div id="a">a</div><br /> 
<div id="b">b</div><br /> 
<div id="c">c</div><br />

Nguồn

2009-05-15 14:36:56

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.links').css("border","1px solid #000"); 
    $('.links').live('click', function() { 
     alert("Link " + $(this).attr('id')); 
    }); 
}); 
</script> 
</head> 
<body> 
<div id="a" class="links">a</div><br /> 
<div id="b" class="links">b</div><br /> 
<div id="c" class="links">c</div><br />

Nguồn

2009-05-15 14:56:58

tôi tin rằng đây là những gì bạn đang sau:

$(document).ready(function(){ 
    links = { 
     a:"Link a", 
     b:"Link b", 
     c:"Link c", 
    }; 

    $.each(links, function(id,text){ 
     $("#"+id) 
     .css("border","1px solid #000") 
     .click(function(){ alert(text) }) 
    }) 
});

Nguồn

2009-05-15 15:02:46 duckyflip

IMO đây là câu trả lời âm thanh duy nhất khác với câu trả lời được chấp nhận. Bằng cách sử dụng mỗi phương thức của jQuery, bạn đang tạo một đóng cửa khi chạy; cho mỗi lần hàm được thực hiện. Công việc tốt đẹp! – James

Thấy như bạn đang thể xác định rõ các yếu tố để được thực hiện anyways, bạn cũng có thể làm theo cách này vì nó có khả năng nhanh hơn và nó sạch hơn, IMO:

$("#a,#b,#c").css("border","1px solid #000"); 
$("#a,#b,#c").click(function(){ 
    alert("Link "+this.id+" Alert!"); 
});

Edit: Tôi không thấy phần cuối của câu hỏi của bạn ... Lấy làm tiếc. Bạn cũng có thể làm điều này:

var links = {}; 
links.a = "Link a"; 
links.b = "Link b"; 
links.c = "Link c"; 

var ids = ''; 
$.each(function(key,val) { 
    ids += "#"+key+","; // extra commas are ignored in jQuery 
}); 

$(ids) 
    .css("border","1px solid #000") 
    .bind('click',function(){ 
     alert("Link "+this.id+" Alert!"); 
    });

Nguồn

2009-05-15 15:05:19 KyleFarris

điều tốt đẹp về jQuery là nó cho phép chuỗi và liên kết nhiều thành phần giống như css.

$(document).ready(function(){ 

    $('#a,#b,#c') 
     .css("border","1px solid #000") 
     .bind('click',function(){ 
      // do something 
     }); 

});

Nguồn

2010-01-12 15:00:00

Hãy thử sử dụng:

$(window).load(function(){ 

});

Nguồn

2011-12-08 15:20:51 DatPT

Working Demo http://jsfiddle.net/FWcHv/

trong bạn mã bạn đang gọi jQuery constructor nhiều lần tức là $('#a') hơn $('#b') và $('#c') thay vào đó bạn nên gọi như $('#a,#b,#c')

Trong mã của tôi, tôi đã vượt qua tất cả các id bằng cách sử dụng $ .each và kết hợp chúng và trong bước tiếp theo tôi đã sử dụng $('#a,#b,#c') được lưu trữ trong biến x để làm cho mã được tối ưu hóa và dễ dàng.

tôi cũng đã thực hiện một kiểm tra rằng nếu links{} là trống rỗng, nó sẽ không xử lý sử dụng biến i

$(document).ready(function() { 
    links = {}; 
    links.a = "Link a"; 
    links.b = "Link b"; 
    links.c = "Link c"; 
    i = 0; 
    x = ''; 
    $.each(links, function (id) { 
     x += "#" + id + ','; 
     i++; 
    }); 
    if (i > 0) { 
     $($(x.slice(0, -1))).css("border", "1px solid #000").click(function() { 
      alert($(this).text()); 
     }); 
    } 
});

Nguồn

2013-07-20 07:22:25

chức năng Binding đến nhiều yếu tố với Jquery

Trả lời

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