Переключить активные и неактивные изображения нажмите

Question

У меня есть два отдельных изображения для каждой активной и неактивной ссылки на моей странице. Каждая ссылка переключает другую статью на моей веб-странице.

<img src="/img/active.png" /> 
<img src="/img/inactive.png" /> 

Я сначала отображая все неактивные изображения на моей странице, но хотелось бы, чтобы отобразить active изображение соответствующей по ссылке пользователь нажмет.

Примечание * Каждое звено, как активные и неактивные, будет иметь уникальный URL изображения

<a href="#"> 
    <div> 
     Click here for foo 
     <img src="/img/inactive-123.png" /> 
    </div> 
</a> 

<a href="#"> 
    <div> 
     Click here for bar 
     <img src="/img/inactive-345.png" /> 
    </div> 
</a> 

Там потенциально будет 100+ ссылки на моей странице, так что я ищу наиболее эффективным & удобный способ сделать это в jquery. Я думал об индексировании этих изображений с помощью числа, но это может легко привести к неправильным связям между моими статьями - любыми идеями?

Answer 1

Если ссылки маршрут на другую страницу, что-то вроде должно работать:

$(function() { 
    var pathname = window.location.pathname.replace(/\//g, ""); 
    $('a[href=' + pathname + '] img').attr('src', "/img/active.png"); 
}); 

Или вам нужно изменить имидж без обновления страницы?

Answer 2

Вы можете выполнить это без jQuery довольно просто. Я предполагаю, что структура элементов внутри <a> будет такой же, как вы писали. Но вы можете создать функцию, которая принимает (элемент) и src, который вы хотите заменить внутренним тегом img. Конечно, вы захотите отредактировать функцию, чтобы быть более безопасной в отношении обработки ошибок, например. исключение из диапазона исключений.

activateImg = function (elm, imgSrc) { 
 
\t elm.children[0].children[0].src = imgSrc; 
 
}

<a href="#" onclick="activateImg(this, 'https://placeholdit.imgix.net/~text?txtsize=33&txt=ACTIVE%20FOO&w=350&h=150')"> 
 
    <div> 
 
     Click here for foo 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=INACTIVE%20FOO&w=350&h=150" /> 
 
    </div> 
 
</a> 
 

 
<a href="#" onclick="activateImg(this, 'https://placeholdit.imgix.net/~text?txtsize=33&txt=ACTIVE%20BAR&w=350&h=150')"> 
 
    <div> 
 
     Click here for bar 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=INACTIVE%20BAR&w=350&h=150" /> 
 
    </div> 
 
</a>

Edit:

Если вы хотите поменять местами изображения вперед и назад просто передать в обоих ссылки на изображения и замены в зависимости от того, какой из них ток src. http://plnkr.co/edit/LUDZEQF1AHXEZ7L83Fyb?p=preview

Редактировать 2: Я просто перечитаю ваш комментарий, и я думаю, что только одно изображение может быть активным одновременно. Для этого вы можете использовать атрибут для управления состоянием вроде data-active. Скоро я приведу пример.

Answer 3

К сожалению для четких JS, не JQuery, как вы упомянули

var tab = document.getElementsByTagName("img"); 
for (var i = 0; i < tab.length; i++){ 
    tab[i].addEventListener('click', function() { 
      if (this.src.indexOf("inactive") !== -1){ 
       this.src = this.src.substring(0, this.src.length -12) 
       this.src += "active.png" 
      } 
      else { 
       this.src = this.src.substring(0, this.src.length -10) 
       this.src += "inactive.png" 
      } 
    }) 
} 

Он будет работать до тех пор, как inactive.png или либо active.png находятся на конце значения Src.

Answer 4

Я придумал простое решение, которым я доволен; Я создал два data атрибуты на каждом изображении

<img 
    src="" 
    data-inactive-src="/inactive-123.png" 
    data-active-src="/active-123.png" 
/> 
<img 
    src="" 
    data-inactive-src="/inactive-345.png" 
    data-active-src="/active-345ng" 
/> 

Затем, когда приходит время, чтобы поменять активный для неактивного образа, я это

var currentIcon = $("#link-"+target).find('a div img') // don't worry about this line 
var allIcons = $('a div img'); 

/** This section SHOULD keep track of the last 
    icon changed and change it back to inactive instead of looping through each element**/ 
allIcons.each(function(index) { 
    $(this).attr("src", $(this).data("inactive-src")); 
}); 

/** Set the active icon image for the current target **/ 
currentIcon.attr("src", currentIcon.data("active-src")); 

Петля each() должны быть выгружены, но это дает мне прекрасный контроль над активными/неактивными изображениями.Если вы видите какие-то недостатки, пожалуйста, дайте мне знать!