如何更改每个 <li> <img> 项目的 src img 属性？

Question

我想为每个 <li> <img> 更改 src 属性。当我单击一个按钮时，我希望每个 img src 属性都用代码中的属性进行更改。

我的代码确实有效，但仅适用于第一个元素。你能给我一个主意吗？谢谢。

$("p").click(function() {
  var menu = $("img");

  for (var i = 0; menu[i]; i++) {
    const menuElement = menu[i];
    if ($(menuElement).attr("src") != "dsdassdada.jpg") {
      $(menuElement).attr("src", "image1.jpg");
      break;
    }
  }
});

img {
  width: 50px;
}

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

<p>sdadsa</p>

<ul>
  <li>
    <img src="https://www.publicdomainpictures.net/pictures/130000/nahled/red-box-background.jpg" />
  </li>
  <li>
    <img src="https://www.publicdomainpictures.net/pictures/130000/nahled/red-box-background.jpg" />
  </li>
  <li>
    <img src="https://www.publicdomainpictures.net/pictures/130000/nahled/red-box-background.jpg" />
  </li>
  <li>
    <img src="https://www.publicdomainpictures.net/pictures/130000/nahled/red-box-background.jpg" />
  </li>
</ul>

Answer 1

直接从$('img')选择器迭代实际上要容易得多，在每次迭代中使用$(this)来引用图像

在这里，我们一张一张地检查图像，如果来源不是“image1.jpg”或“dsdassdada.jpg”，那么我们更改它，并设置一个变量，这样我们的循环停止寻找。

我没有选择 if(src=='this' || src=='that')，而是选择了 shorthand if (array_of_imgs.includes(this_src))

let newsrc = "image1.jpg";
$("p").click(function() {
  let found = false
  $("img").each(function() {
    if (found) return;
    if (![newsrc, "dsdassdada.jpg"].includes($(this).attr("src"))) {
      $(this).attr("src", newsrc);
      found = true
    }
  })
});

img {
  width: 50px;
}

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

<p>sdadsa</p>

<ul>
  <li>
    <img src="https://www.publicdomainpictures.net/pictures/130000/nahled/red-box-background.jpg" />
  </li>
  <li>
    <img src="https://www.publicdomainpictures.net/pictures/130000/nahled/red-box-background.jpg" />
  </li>
  <li>
    <img src="https://www.publicdomainpictures.net/pictures/130000/nahled/red-box-background.jpg" />
  </li>
  <li>
    <img src="https://www.publicdomainpictures.net/pictures/130000/nahled/red-box-background.jpg" />
  </li>
</ul>

Answer 2

使用jQuery each()函数。这是脚本的一个简短示例：

$("p").click(function () {
        $("img").each(function(){
                if ($(this).attr("src") != "dsdassdada.jpg") {
                        $(this).attr("src", "image1.jpg");
                }
        });
});

Answer 3

除了其他答案，您甚至不需要 if 语句。您可以使用更具体的选择器仅查询需要更改的元素。

而且，由于您只希望每次点击都影响序列中的下一张图像，因此您也不需要循环。您只想找到第一张不匹配的图片。

$("p").click(function() {
  $("img:not([src='image1.jpg'])")[0].src = "image1.jpg";
});

img {
  width: 50px;
}

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

<p>sdadsa</p>

<ul>
  <li>
    <img src="https://www.publicdomainpictures.net/pictures/130000/nahled/red-box-background.jpg" />
  </li>
  <li>
    <img src="https://www.publicdomainpictures.net/pictures/130000/nahled/red-box-background.jpg" />
  </li>
  <li>
    <img src="https://www.publicdomainpictures.net/pictures/130000/nahled/red-box-background.jpg" />
  </li>
  <li>
    <img src="https://www.publicdomainpictures.net/pictures/130000/nahled/red-box-background.jpg" />
  </li>
</ul>

Answer 4

您在 jQuery 个方法和对象中无休止地跳来跳去。

如果你想使用 jQuery 使用它，否则使用所有本机代码。将两者混合会导致混淆。

您可以使用 jQuery each() 遍历所有元素，或者更简单的方法是使用 attr(attributeName, function)，它也将遍历所有元素并让您访问当前值每个实例

const imgUrls ={
  i1: 'https://via.placeholder.com/150/0000FF/808080',
  i2:'https://via.placeholder.com/150/FF0000/FFFFFF'
}

$('p').click((e)=>{
  $('ul img').attr('src', (i, curr)=>{   
     return curr === imgUrls.i1 ? imgUrls.i2 : imgUrls.i1;  
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Click me</p>

<ul>
  <li><img src="https://via.placeholder.com/150/0000FF/808080" /></li>
  <li><img src="https://via.placeholder.com/150/0000FF/808080" /></li>
  <li><img src="https://via.placeholder.com/150/0000FF/808080" /></li>
  <li><img src="https://via.placeholder.com/150/0000FF/808080" /></li>
</ul>

Answer 5

主要问题似乎是在 for 循环的第一次迭代之后，循环由 break 语句退出。删除 break 语句将允许循环继续处理其余图像。

// Gets a list of all img tags 
var menu = $("img");

// Loops through each menu item
for (var i = 0; menu[i]; i++) {

  // Gets element of current index
  const menuElement = menu[i];

  // Checks the source of the image to equal a specific value, (currently this is always true as "https://.../red-box-background.jpg" does not equal "dsdassdada.jpg")
  if ($(menuElement).attr("src") != "dsdassdada.jpg") {

    // The first image element source is set to "image1.jpg"
    $(menuElement).attr("src", "image1.jpg");

    // The for loop is exited, only the first image source is changed.
    break;
  }
}

其他一些可能有用的事情：

<p>sdadsa</p> 最好是按钮元素：<button type="button">Switch Background</button>
理想情况下，只需要jQuery一个版本！应该能够删除两者之一：

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

可以使用each方法，它可以稍微简化循环并有助于解决第一次迭代后循环退出的问题：

$("button").click(function () {
  $("img").each((_, element) => {
    if ($(element).attr("src") != "dsdassdada.jpg") {
      $(element).attr("src", "image1.jpg");
    }
  });
});

如何更改每个 <li> <img> 项目的 src img 属性？

How do i change the src img attribute for each <li> <img> item?

javascript

jquery

loops

image

src