jQuery Hide используя ID

Question

Я пытаюсь изменить цвет границы изображения, используя его идентификатор с помощью jquery. (фотография ['id'] передается из предыдущей функции) идентификаторы фотографий имеют вид «photo239839»

 $('#photo'+photo['id']+'').click(function(){  
       $('#photo'+photo['id']+'').css('border-color','#777');

    });

Когда я пытаюсь использовать этот же код, используя его класс, он работает, но я не могу использовать этот метод, так как есть несколько изображений на одном страница того же класса

$('img.flickr_photo').click(function() {
    $("this.flickr_photo").css('border-color','#777');
});

Answer 1

Это то, что вам нужно сделать:

$('img.flickr_photo').click(function(){  
       $(this).css('border-color','#777');
});

Answer 2

Я бы всегда добавил класс CSS, а не встроенный стиль. Гораздо больше в обслуживании и расширении.

Пример:

$('img.flickr_photo').click(function(){  
       $(this).addClass('greyishBorder');
});

Answer 3

Либо фотография ['id'] неверна, либо меняется после настройки обработчика щелчков.

Чтобы проверить первый случай, вы можете оповестить (или console.log с помощью FireBug, или как угодно) о длине выбора jQuery:

alert($('#photo'+photo['id']).length);

Решением во втором случае является использование «this». В обработчике кликов «this» задается для элемента, вызвавшего событие клика.

$('#photo'+photo['id']).click(function(){  
   $(this).css('border-color','#777');
});

Edit: @Dreas Grech прав, если вы хотите применить поведение ко всем элементам с классом flickr_photo. Если вы можете обобщить селектор для выбора всех элементов одним запросом, лучше сделать это.