Wiążąca funkcja do wielu elementów z jQuery

mam ten mały problem z jQuery: muszę zrobić coś takiego:Wiążąca funkcja do wielu elementów z 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 />

tak, że po kliknięciu na div # A dostaniesz „powiązać” alert , "Link b" na div # b i tak dalej ... Problem polega na tym, że jeśli uruchomisz ten kod, kliknięcie na każdy element da alert ("Link c") jako wynik, wydaje się, że tylko ostatnia zmiana funkcji jest przypisany do każdego elementu div ...

Oczywiście mogę go zhackować, edytując funkcję do pracy z identyfikatorem div i używając $ (this), ale dla cursiosity: czy jest jakiś sposób, aby ten cykl zadziałał? Tworząc i przypisując nową funkcję do każdego elementu w funkcji?

Thx wcześniej ...

Źródło

2009-05-15 Alekc

Wystarczy FYI, to nieco schludniej jeśli łańcuch swój jQuery zamiast ponownego wybierania selektora. * Przykład: * '$ ('#' + x) .css ('border', '1px solid # 000'). Click (fn);' –

Użyj zamknięcie: (a „to” rozwiązanie jest bardziej elegancki, ale jestem delegowania to teraz ponieważ usunięte odpowiedź miał rozwiązanie zamknięcia, które nie działają)

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

Źródło

2009-05-15 14:49:58

Dzięki, tego właśnie szukałem :) – Alekc

Musisz użyć "ten".

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

Źródło

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

Źródło

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

Źródło

2009-05-15 14:56:58

wierzę, że to jest to, co jesteś po:

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

Źródło

2009-05-15 15:02:46 duckyflip

IMO jest to jedyna odpowiedź dźwiękowa inna niż zaakceptowana. Używając każdej metody jQuery tworzysz zamknięcie w biegu; za każdym razem, gdy funkcja jest wykonywana. Dobra robota! – James

Widząc jak jesteś hardcoding elementy mają być dokonywane tak czy inaczej, równie dobrze można zrobić to w ten sposób, jak to prawdopodobne, szybsze i czystsze, IMO:

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

Edit: Nie patrz ostatnia część twojego pytania ... Przepraszam. Można też to zrobić:

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

Źródło

2009-05-15 15:05:19 KyleFarris

Zaletą jQuery jest to umożliwia łączenia i wiązania wiele elementów takich jak CSS.

$(document).ready(function(){ 

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

});

Źródło

2010-01-12 15:00:00

Spróbuj użyć:

$(window).load(function(){ 

});

Źródło

2011-12-08 15:20:51 DatPT

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

w kodować dzwonisz konstruktora jQuery wiele razy tj $('#a') niż $('#b') i $('#c') zamiast należy zadzwonić jak $('#a,#b,#c')

W moim kodzie przeszedłem przez wszystkie id za pomocą $ .each i połączyłem je iw następnym kroku użyłem $('#a,#b,#c') przechowywanego w zmiennej x, aby kod był zoptymalizowany i łatwy.

mam również czek, że jeśli links{} jest pusta nie będzie przetwarzać stosując zmienny 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()); 
     }); 
    } 
});

Źródło

2013-07-20 07:22:25

Wiążąca funkcja do wielu elementów z jQuery

Odpowiedz

Powiązane problemy