Зміна джерела зображення за допомогою jQuery

763

Мій DOM виглядає так:

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

Коли хтось натискає на зображення, я хочу, щоб зображення src змінилося на місце, <img src="imgx_off.gif">де xзображено зображення № 1 або 2.

Чи можливо це чи потрібно використовувати CSS для зміни зображень?

javascript jquery image

— user67033
джерело

Якщо ви хочете щось використовувати jQuery, ви можете заглянути в jQuery Cycle Plugin, демонстрація scrollRight (приклад праворуч знизу)

— TomHastjarjanto

43

jQuery ("# my_image"). attr ("src", "first.jpg")

— manish nautiyal

9

Ви дійсно повинні прийняти відповідь jonstjohn :) Кількість відгуків як на питання, так і на відповідь свідчить про те, що багато людей зіткнулися з цим. Було б покращити питання, щоб мати прийняту відповідь.

— Xcelled

4

До дати, тобто кількість 19th July, 2016 15:39 PMзапитань підрахунку 369 і @jonstjohn відповідь на кількість посилань 931 . Але, така невдача, @OP не ввійшов після цього Feb 17 '09 at 2:57. :(І, @jonstjohn Відповідь Залишайтеся немаркованих .

— Nana Partykar

@Xcelled, єдина проблема полягає в тому, що відповідь jonstjohn не відповідає на питання. Це другорядний момент, але варто його зробити. Погляньте на відповідь інко, оскільки вона є єдиною, яка насправді відповідає правильно на питання.

— Девід Ньюкомб

1686

Ви можете використовувати функцію attr () jQuery . Наприклад, якщо ваш imgтег має idатрибут "my_image", ви зробите це:

<img id="my_image" src="first.jpg"/>

Тоді ви можете змінити srcсвоє зображення за допомогою jQuery так:

$("#my_image").attr("src","second.jpg");

Щоб долучити це до clickподії, ви можете написати:

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

Щоб повернути зображення, ви можете зробити це:

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

— jonstjohn
джерело

79

Однією з найпоширеніших помилок, яку роблять люди при зміні джерела зображення, не чекає завантаження зображення, щоб зробити наступні дії, такі як дозрівання розміру зображення і т. Д. Вам потрібно використовувати .load()метод jQuery, щоб робити речі після завантаження зображення.

$('yourimageselector').attr('src', 'newsrc').load(function(){
    this.width;   // Note: $(this).width() will not work for in memory images

});

Причина редагування: https://stackoverflow.com/a/670433/561545

— Мохсен
джерело

Так. Це нарешті зробило трюк. .destroy () недостатньо далеко Знищення всіх html та ніж init знову насправді працює під час заміни зображень різного розміру тощо.

— Метт Дж.

зауважте, що завантаження не спрацьовує надійно, особливо якщо зображення знаходиться в кеші. Дивіться документацію jQuery.

— Twilite

19

Для отримання додаткової інформації. Я намагаюся встановити атрибут src методом attr в jquery для зображення оголошення, використовуючи, наприклад, синтаксис:$("#myid").attr('src', '/images/sample.gif');

Це рішення є корисним і працює, але якщо змінити шлях, зміниться також шлях зображення та не працює.

Я шукав рішення цієї проблеми, але нічого не знайшов.

Рішення полягає в тому, щоб поставити "\" на початку шляху: $("#myid").attr('src', '\images/sample.gif');

Цей трюк дуже корисний для мене, і я сподіваюся, що буде корисним для інших.

— wphonestudio
джерело

18

ЯКЩО є не тільки jQuery або інші рамки для вбивства ресурсів - багато кбітів для кожного завантаження кожного користувача просто за просту хитрість - але і рідний JavaScript (!):

<img src="img1_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img1_off.jpg':'img1_on.jpg';">
<img src="img2_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img2_off.jpg':'img2_on.jpg';">

Це можна написати загальним та елегантнішим:

<html>
<head>
<script>
function switchImg(img){
    img.src = img.src.match(/_on/) ? 
        img.src.replace(/_on/, "_off") : 
        img.src.replace(/_off/, "_on");
}
</script>
</head>
<body>
    <img src="img1_on.jpg" onclick="switchImg(this)">
    <img src="img2_on.jpg" onclick="switchImg(this)">
</body>
</html>

— інко
джерело

Мене завжди дивує, скільки людей не можуть прочитати запитання і дати відповідь на запит. Мені (і вам) здавалося очевидним, що питання шукає загальне рішення, саме тому ОП наводить 2 приклади. І все ж, здавалося, всі інші не тільки повністю пропустили це, але дали відповідь, яка навіть не відповіла на питання. :(

— Девід Ньюкомб

17

Я покажу вам, як змінити зображення src, щоб при натисканні на зображення воно оберталося через усі зображення, що знаходяться у вашому HTML ( конкретно у вашому d1ідентифікаторі та c1класі) ... чи маєте 2 чи більше зображень у вашому HTML .

Я також покажу вам, як очистити сторінку після того, як документ буде готовий, щоб спочатку відображалося лише одне зображення.

Повний код

$(function() {

    var $images = $("#d1 > .c1 > a").clone();  

    var $length = $images.length;
    var $imgShow = 0;

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );  

    $("#d1 > .c1 > a").click(function(event) { 

        $(this).children().attr("src", 
                        $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();

    });
});

Розбивка

Створіть копію посилань, що містять зображення (зверніть увагу: ви також можете скористатися атрибутом href посилань для додаткової функціональності ... наприклад, відобразити робоче посилання під кожним зображенням ):
```
    var $images = $("#d1 > .c1 > a").clone();  ;
```
Перевірте, скільки зображень було в HTML, і створіть змінну для відстеження, яке зображення відображається:
```
var $length = $images.length;
var $imgShow = 0;
```
Змініть HTML-документ документа таким чином, щоб відображалося лише перше зображення. Видаліть усі інші зображення.
```
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") ); 
```
Прив’яжіть функцію для обробки, коли клацніть посилання на зображення.
```
    $("#d1 > .c1 > a").click(function(event) { 
        $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();
    });
```
Серце наведеного вище коду використовується ++$imgShow % $lengthдля переходу по об'єкту jQuery, що містить зображення. ++$imgShow % $lengthспочатку збільшує наш лічильник на одиницю, потім він модифікує це число на кількість зображень. Це дозволить утримати результуючий показник циклу від 0до length-1, які є індексами $imagesоб'єкта. Це означає, що цей код буде працювати з 2, 3, 5, 10 або 100 зображеннями ..., переглядаючи кожне зображення в порядку та перезавантажуючи перше зображення, коли буде досягнуто останнє зображення.

Крім того, .attr()використовується для отримання та встановлення атрибута "src" зображень. Для вибору елементів з-поміж $imagesоб'єктів я встановлюю $imagesяк jQuery контекст за допомогою форми $(selector, context). Тоді я використовую, .eq()щоб вибрати лише той елемент із конкретним індексом, який мене цікавить.

Приклад jsFiddle з 3 зображеннями

Ви також можете зберігати srcs в масиві.
Приклад jsFiddle з 3 зображеннями

Ось як можна включити hrefs із тегів якоря навколо зображень:
jsFiddle приклад

— Пітер Айтай
джерело

17

Сподіваюся, це може спрацювати

<img id="dummyimage" src="http://dummyimage.com/450x255/" alt="" />
<button id="changeSize">Change Size</button>

$(document).ready(function() {
    var flag = 0;
    $("button#changeSize").click(function() {
        if (flag == 0) {
            $("#dummyimage").attr("src", "http://dummyimage.com/250x155/");
            flag = 1;
        } else if (flag == 1) {
            $("#dummyimage").attr("src", "http://dummyimage.com/450x255/");
            flag = 0;
        }
    });
});

— Зеешан
джерело

Хоча цей фрагмент коду може вирішити питання, зокрема пояснення дійсно допомагає покращити якість вашої публікації. Пам’ятайте, що ви відповідаєте на запитання читачів у майбутньому, і ці люди можуть не знати причини вашої пропозиції щодо коду.

— Дерек Браун

Спасибі, Дерек буде тримати цю думку на думці з наступного разу

— Зеешан

14

Ви повинні додати атрибут id до свого тегу зображень, як це:

<div id="d1">
   <div class="c1">
            <a href="#"><img id="img1" src="img1_on.gif"></a>
            <a href="#"><img id="img2" src="img2_on.gif"></a>
   </div>
</div>

тоді ви можете використовувати цей код для зміни джерела зображень:

 $(document).ready(function () {
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });

— Містер Бітмап
джерело

9

Ви також можете це зробити з jQuery таким чином:

$(".c1 img").click(function(){
     $(this).attr('src','/new/image/src.jpg');   
});

Ви можете мати умову, якщо для джерела зображення є кілька станів.

— FernandoEscher
джерело

5

цей синтаксис неправильний. Функція jquery attr () займає 1 або 2 парами. Перший - це рядок з ім'ям атрибута HTML, другий - значенням того атрибута, який ви хочете встановити.

— Тіаго Сільва

7

У мене була така ж проблема, коли я намагався викликати кнопку повторної Captcha. Після деяких пошуків тепер наведена нижче функція чудово працює майже у всіх відомих браузерах (chrome, Firefox, IE, Edge, ...):

function recaptcha(theUrl) {
  $.get(theUrl, function(data, status){});
  $("#captcha-img").attr('src', "");
  setTimeout(function(){
       $("#captcha-img").attr('src', "captcha?"+new Date().getTime());
  }, 0);
 }

'theUrl' використовується для візуалізації нового зображення captcha і може бути проігноровано у вашому випадку. Найважливішим моментом є створення нової URL-адреси, яка змушує FF та IE відновлювати зображення.

— Кайван Техерані
джерело

7

Змініть джерело зображення за допомогою jQuery click()

елемент:

    <img class="letstalk btn"  src="images/chatbuble.png" />

код:

    $(".letstalk").click(function(){
        var newsrc;
        if($(this).attr("src")=="/images/chatbuble.png")
        {
            newsrc="/images/closechat.png";
            $(this).attr("src", newsrc);
        }
        else
        {
            newsrc="/images/chatbuble.png";
            $(this).attr("src", newsrc);
        }
    });

— Абхіджіт Пуджарі
джерело

7

Якщо ви оновлюєте зображення декілька разів, і воно отримує CACHED і не оновлюється, додайте випадковий рядок наприкінці:

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());

— кинцукурой
джерело

1

Дуже важливо, принаймні для мене, додати до кінця випадковий рядок! Танки!

— Марсело Садер

3

У мене сьогодні таке ж диво, що я робив так:

//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');  
});

— Anyone_ph
джерело

3

Це гарантований спосіб зробити це у ванільному (або просто чистому) JavaScript:

var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;

— Реймонд Вачага
джерело

1

Просто доповнення, щоб зробити його ще крихітнішим:

$('#imgId').click(function(){
    $(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});

— Сел Лайош
джерело

-1

Неможливо змінити джерело зображення за допомогою CSS.

Єдиним можливим способом є використання Javascript або будь-якої бібліотеки Javascript, наприклад jQuery .

Логіка-

Зображення не знаходяться всередині DIV і є немає classабо idз цим зображенням.

Таким чином, логікою будуть обрані елементи всередині того місця, divде розташовані зображення.

Потім виберіть усі елементи зображень за допомогою циклу та змініть src зображення за допомогою Javascript / jQuery .

Приклад коду з демонстраційним виведенням

$(document).ready(function()
{
    $("button").click(function()
    {
      $("#d1 .c1 a").each(function()
      {
          $(this).children('img').attr('src', 'https://www.gravatar.com/avatar/e56672acdbce5d9eda58a178ade59ffe');
      });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

<button>Change The Images</button>

Розгорніть фрагмент

— Абрар Джахін
джерело