0

我想更改 src 属性，对于每个<li> <img>. 当我单击一个按钮时，我希望每个 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>

4

5 回答 5

1

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

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

而不是做一个if(src=='this' || src=='that')我选择了速记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>

于 2021-06-09T20:48:10.243 回答
0

您在 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>

于 2021-06-09T20:58:22.873 回答
0

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

$("p").click(function () {
        $("img").each(function(){
                if ($(this).attr("src") != "dsdassdada.jpg") {
                        $(this).attr("src", "image1.jpg");
                }
        });
});
于 2021-06-09T20:49:08.997 回答
0

除了其他答案之外，您甚至不需要该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>

于 2021-06-09T20:53:53.357 回答
0

主要问题似乎是在 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;
  }
}

其他一些可能会有所帮助的事情：

  1. <p>sdadsa</p>最好是一个按钮元素：<button type="button">Switch Background</button>

  2. 理想情况下，只需要一个版本的 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>
  1. 可以使用该each方法，它可以稍微简化循环，并有助于解决第一次迭代后循环退出的问题：
$("button").click(function () {
  $("img").each((_, element) => {
    if ($(element).attr("src") != "dsdassdada.jpg") {
      $(element).attr("src", "image1.jpg");
    }
  });
});
于 2021-06-09T21:15:54.490 回答