时间戳

首页 > 解决方案 > 更改Image src，将全部更改为一张图片jquery

jquery - 更改Image src，将全部更改为一张图片jquery

问题描述

我尝试在特定条件下更改所有图像的 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”&gt;
      <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,...)

查询：

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。我尽可能多地解释了，如果有什么不清楚的地方，我会在这里解释。谢谢。

标签： jqueryhtml

解决方案

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

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 );

   })
}

推荐阅读