Good points by Josh. However this selector example...
$('img[class="thumb"]).mouseover
...can be written simpler as....
$("img.thumb").mouseover
It's faster in most browsers to select-by-class than to iterate
elements and 'read attributes'. jQuery may process both syntaxes the
same (?), but using the "img.thumb" syntax *guarantees* the most
optimized handling.
This is a strange code sample. Why 'add' a class on mouseover, but not
remove it on mouseout? If you want to add/remove the 'dim' class, then
use jQuery's hover method to combine both events...
$("img.thumb").hover(
function () { $(this).addClass('dim');
, function () { $(this).removeClass('dim');
);
If you *don't* want to remove the class, then this function only needs
to run 'once', because the class only needs to be added on the FIRST
mouseover event. In this case, use jQuery's .one() (one-time)
method...
$("img.thumb").one("mouseover",
function () { $(this).addClass('dim');
);
/Kevin
On Aug 30, 1:02 am, Josh Powell <seas...@gmail.com> wrote:
> for (i = 1; i < 5; i++) {
> $('#thumb' + i).bind('mouseover',function(event) {
> $(this).addClass('dim');
> });
> }
>
> The 'i' you've called here is a global variable, in a for loop always
> put a var in front of it to have local scope (to the function, not
> block)
>
> for (var i = 1; i < 5; i++) {
> $('#thumb' + i).bind('mouseover',function(event) {
> $(this).addClass('dim');
> });
> }
>
> but... more importantly, reframe your thoughts on javascript/jquery
> programming to let the selectors do the iteration for you.
>
> $('img[class="thumb"]).mouseover(function () {
> $(this).addClass('dim');
>
> });
>
> <snip />
>
> Josh Powell
>
