Использование jQuery для динамического изменения источника изображения

У меня есть страница, представляющая собой серию элементов N img. Мне нужно, чтобы каждый образ был нажат, чтобы перейти к следующему изображению в их собственной серии из трех. Я объяснил свой html ниже, чтобы объяснить.Использование jQuery для динамического изменения источника изображения

<body> 
    <div class="images"> 
     <div class="image_group"> 
      <img id="first" src="group1_image1"></img> 
      <img id="second" src="group1_image2"></img> //this isn't displayed until clicked 
      <img id="third" src="group1_image3"></img> //when this is displayed, it cycles back to group1image1 
     </div> 
     ... 
     <div class="image_group"> 
      <img id="first" src="groupN_image1"></img> 
      <img id="second" src="groupN_image2"></img> 
      <img id="third" src="groupN_image3"></img> 
      </div> 
     </div> 
</body>

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

Моя проблема заключается в написании метода JQuery, который может выполнять этот циклический цикл, делая «второе» изображение заменяя «первые» изображения при нажатии и так далее. В приведенном ниже методе перезаписывается источник изображения, который кажется глупым, но я не могу придумать лучшего способа сделать это. Я также не уверен, будет ли «первый» образ класса изолирован в div «image_group» (как он должен), или если он изменит все изображения на странице на их «второй» образ класса.

$("#first").attr("src","group1_image2.jpg");

Может кто-нибудь подумать о способе сделать это?

источник

2015-10-07 user5392022

Помните, что идентификаторы ** должны быть уникальными ** в вашем документе. – Terry

Я хотел бы сделать что-то вроде этого

$("image_group img").on("click", function() { 
    var index = $(this).index(); 
    $(this).attr("src", index === $("img").length - 1 ? $(this).next().src : $("img")[0].src); 
});

источник

2015-10-07 20:00:06

УТОЧНИТЬ ваш HTML:

<body> 
    <div class="images"> 
     <div class="image_group"> 
      <img id="1,1" data_num="1,1" src="group1_image1"></img> 
     </div> 
     ... 
     <div class="image_group"> 
      <img id="n,1" data_num="n,1" src="groupN_image1"></img> 
      </div> 
     </div> 
</body>

и тогда вы могли бы сделать что-то вроде:

$("image_group img").on("click", function() { 
    var max = 3; 
    var indexes = $(this).data('num').split(','); 
    if (indexes[1] == max 
     indexes[1] = 1; 
    else 
     indexes[1]++; 
    $(this).attr("src", "group" + indexes[0] + "_image" + indexes[1]); 
    $(this).data('num', indexes.join(',')) 
});

источник

2015-10-07 20:11:24

Использование jQuery для динамического изменения источника изображения

ответ

Смежные вопросы