2013-03-07 5 views
1

Хотите заменить изображенияЗаменить содержимое JQuery

HTML:

<a href="#"><img src="products.jpg" alt="products" /></a> 
    <a href="#"><img src="another-image.jpg" alt="another-image" /></a> 
+0

почему бы не присвоить класс ваш теги затем определяют функцию одного щелчка по всем тегам с этим классом? –

+0

Но если я нажму одно изображение с одним классом, не пострадают ли все остальные изображения с классом? – user1959901

+0

Нет, если обработчик клика ссылается на 'this' вместо повторения поиска. –

ответ

0

Перед тем, как изменить изображения источников сохранить их с помощью функции JQuery .data(). Затем, когда вы нажимаете на них, восстанавливает свойство src. Что-то вроде этого:

if ($(window).width() <= 480) { 

    $('img').each(function (i, k) { 
     $(k).data('src', $(k).attr('src')); 
     $(k).attr('src', 'temp_image.jpg'); 
    }); 

    $('img').click(function() { 
     $(this).attr('src', $(this).data('src')); 
    }); 
} 

Ref:http://api.jquery.com/data/

+0

Человек, который работал так, как я хотел. Спасибо огромное! – user1959901

+0

@ user1959901 Добро пожаловать. Не забывайте всегда подбирать ответ, который вы считаете наиболее подходящим. – letiagoalves

0

Это должно быть легко.

Прежде всего, .click() связывает функции с кликом события с вызываемым объектом. Вы не можете (ну вы можете, но это не будет работать, как вы ожидаете) связывания события внутри .each()

Попробуйте что-то вроде этого:

<div id="banner"> 
    <a href="#"><img src="banner.jpg" id="realImg1" alt="banner" /></a> 
    <a href="#"><img src="another-image.jpg" id="realImg2" alt="another-image" /></a> 
</div> 


<script> 
    $(document).ready(function() { 

     var counter = 0; 
     var toggle_images = function() { 

       if (counter % 2) // if pair, change all pics to "dummy.jpg" 
       { 
        $('img').each(function 
        ({ 
         $(this).attr('src', 'dummy.jpg'); 
        }; 
       } 
       else // if odd restore its initial src (you can recycle the value in alt) 
       { 
        $('img').each 
        ({ 
         // get the name from the alt property and append '.jpg' 
         var pic_path = $(this).attr('alt') + '.jpg' 
         $(this).attr('src', pic_path); 
        }); 
       } 
       counter += 1; 

     }; 

     $('img').click(toggle_images); // bind the event 
</script> 
Смежные вопросы