Question

我尝试在特定条件下更改所有图像的src值。但是它将所有这些更改为第一个图像值，一旦更改了第一个图像值，其余的与第一个相同。

HTML代码：输入：

<label>
<input data-parent=“1” class="attribute" type="checkbox" value=“332” />
CHANGE
</label>

HTML代码：图像：

//This code is being repeated through the page
    <div class="fl-img">
     <a href=“Hero_1_url”>
      <input class="pictureinput" style="display:none;" type="checkbox" value=“Hero_1” />
//I cant pass the Hero_1 image to jquery based on project structure so I used input to pass 
//the Hero_1 value to jquery
      <img class="changepicture" src=“Hero_1” alt=“Hero_1” />
     </a>
    </div>
//There are tens of fl-img divs on repeat based on database (Hero_2, Hero_3,...)

JQUERY：

var checkedValue = $('.attribute:checked').val();
var pictureValue = $('.pictureinput').val();
if (checkedValue == 332) 
{
pictureValue = pictureValue.replace("Hero", "00");
$(".changepicture").attr("src", “pictureValue”);
}

此代码适用于第一张图片，但也将src中具有hero值的所有图片替换为第一张图片。例如：将第一个Hero_1更改为00_1，但所有其他图片（Hero_2，Hero_3，...）都更改为00_1。我尽我所能解释，如果不清楚，我在这里解释。谢谢。

Answer 1

您应该遍历每个图像而不是第一个图像。

var checkedValue = $('.attribute:checked').val();
if (checkedValue == 332)  
{

  $(".changepicture").each(function(){
     //get parent
     var parent = $(this).parent();
     var pictureValue = $(parent).find('.pictureinput').val();
      pictureValue = pictureValue.replace("Hero", "00");
      $(this).attr("src", pictureValue );

   })
}

Answer 2

问题是您只获得第一张图片的价值，并在各处使用它

var checkedValue = $('.attribute:checked').val();
var pictureValue = $('.pictureinput').val(); // <--- HERE
if (checkedValue == 332)
{
  pictureValue = pictureValue.replace("Hero", "00");
  $(".changepicture").attr("src", “pictureValue”);
}

您需要为每个元素使用不同的值，可以使用each函数

var checkedValue = $('.attribute:checked').val();
if (checkedValue == 332)
{
  $('.pictureinput').each(function(idx, el) {
    pictureValue = el.value; // <-- now pictureValue will be different for each image
    pictureValue = pictureValue.replace("Hero", "00");
    el.nextSibling.src = pictureValue;
  }
}

更改Image src，将全部更改为一个image jquery

2 个答案: