Обмен изображениями в меню с использованием JavaScript

Question

Первоначальная публикация здесь так нежная. Я пытаюсь создать меню для веб-сайта с помощью javascript. Я хочу щелкнуть элемент в моем меню и обменять изображения. Эта часть проста и работает нормально. Там, где я падаю, я хочу, чтобы предыдущие элементы в моем меню возвращались к исходному исходному изображению. Это было бы просто, если бы все они использовали одни и те же изображения, но все они имеют свои уникальные образы. Надеюсь, я объясняю себя хорошо.

Answer 1

Вы можете использовать функцию $.data для хранения информации в элементе для последующего извлечения.

Перед тем как изменить изображение src, вы сохраните текущий src, чтобы затем использовать его для восстановления src, если вы хотите его изменить.
Пример:

// When a menu item's link is clicked 
 
$('.menu-item a').on('click', function(e) { 
 
    // Prevent the link firing 
 
    e.preventDefault(); 
 
    // Grab the menu item 
 
    var self = $(this).parent(); 
 

 
    // find our image 
 
    var img = self.find('img'); 
 
    // make sure we're not double changing 
 
    if (!img.hasClass('changed')) { 
 
    // Store our existing src in a the jQuery data 
 
    img.data('original-src', img.attr('src')); 
 
    // Set a new src 
 
    img.attr('src', 'http://lorempixel.com/g/20/20/'); 
 
    // Add a class so we know what's changed 
 
    img.addClass('changed'); 
 
    } 
 

 
    // Search for existing changed images 
 
    self.siblings().find('img.changed').each(function() { 
 
    var img = $(this); 
 
    // Remove the changed tag 
 
    img.removeClass('changed'); 
 
    // Restore the src 
 
    img.attr('src', img.data('original-src')); 
 
    }); 
 

 
});

#my-menu { 
 
    list-style: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ol id="my-menu"> 
 
    <li class="menu-item"> 
 
    <a href="#"> 
 
     <img src="http://placehold.it/20x20" role="presentation" /> 
 
     One 
 
    </a> 
 
    </li> 
 
    <li class="menu-item"> 
 
    <a href="#"> 
 
     <img src="http://placehold.it/20x20" role="presentation" /> 
 
     Two 
 
    </a> 
 
    </li> 
 
    <li class="menu-item"> 
 
    <a href="#"> 
 
     <img src="http://placehold.it/20x20" role="presentation" /> 
 
     Three 
 
    </a> 
 
    </li> 
 
</ol>