Question

我有一个类似的列表，

<li class="">
  <ul class="item  highlightShoplift">
    <li class="title left">
      <img width="30" height="30" src="/images/crimes/c.png?v=1486475443550">
    </li>
    <li class="radio right has-pretty-child">
      <div class="clearfix prettyradio labelright  blue" role="radio" aria-checked="false" aria-disabled="false" "=" ">
        <input type="radio" value="shoplift " name="crime " style="display: none; ">
        <a href="# " role="presentation " tabindex="0 " class=" "></a>
        <label for="undefined " class=" "></label>
      </div>
    </li>
    <li class="bonus left ">
      Shoplift
    </li>
    <li class="points left ">
      <span class="desc ">-4 Nerve</span>
    </li>
    <li class="clear "></li>
  </ul>
</li>

我需要更改图像。我需要将它从/images/crimes/c.png更改为http://medictests.com/wp-content/uploads/2011/05/checkmark.png

然而，我不确定如何。使用jquery / javascript。

Answer 1

这取决于很多东西，例如，触发变更的内容，手头的要求是什么等。

以下是更改示例要求的图像的示例代码段，例如使用JavaScript在预定义时间后更改图像。

现在我们可以使用普通香草JavaScript来完成它，这里可能是以下步骤：

找到我们的目标图像元素（考虑使用特定的选择器和组合器）
了解超时期限
更改图片的src属性以指向新图片

window.onload = function() {
  // Get the Image element
  var img = document.querySelector("ul.item img");

  // New image
  var imageUrl = 'http://medictests.com/wp-content/uploads/2011/05/checkmark.png';

  // Change the image after a set time, for example
  setTimeout(function() {
    img.setAttribute("src", imageUrl);
  }, 1000);

}

<ul class="item  highlightShoplift">
  <li class="title left">
    <img width="30" height="30" src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Bucephala-albeola-010.jpg">
  </li>
</ul>

让我们更进一步说 - 我们应该仅在src属性包含特定术语（例如 flower ）时替换图像。

window.onload = function() {
  // Get the Image element
  var imgElements = document.querySelectorAll("ul.item img");

  // New image
  var imageUrl = 'http://medictests.com/wp-content/uploads/2011/05/checkmark.png';

  imgElements.forEach(function(element, index, array) {

    if (element.src.toLowerCase().includes("flower")) {
      setTimeout(function() {
        element.setAttribute("src", imageUrl);
      }, 1000);
    }
  });

}

<ul class="item  highlightShoplift">
  <li class="title left">
    <img width="30" height="30" src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Bucephala-albeola-010.jpg">
  </li>

  <li class="title left">
    <img width="30" height="30" src="https://upload.wikimedia.org/wikipedia/commons/0/0c/White_and_yellow_flower.JPG">
  </li>

  <li class="title left">
    <img width="30" height="30" src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Flower_poster_2.jpg">
  </li>


</ul>

Answer 2

如果您向图片标记添加id属性，例如

<img id="imgToChange" width="30" height="30" src="/images/crimes/c.png?v=1486475443550">

然后，您可以直接更改图像src属性，如

document.getElementById("imgToChange").src= "http://medictests.com/wp-content/uploads/2011/05/checkmark.png";

并使用 jquery

$("#imgToChange").attr('src', 'http://medictests.com/wp-content/uploads/2011/05/checkmark.png');

Answer 3

使用jQuery：

$("img").attr('src' ,'http://medictests.com/wp-content/uploads/2011/05/checkmark.png');

请注意，最好给img一个类并仅定位该特定图像。

Answer 4

这是一个非常糟糕的问题，但我认为如果图像的SRC包含某个单词，则需要更改图像。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
    var src = ''; //YOUR SRC IF STRING CONTAINS
    var other_src = ''; //YOUR SRC IF STRING DOESN'T CONTAIN
    if(src.indexOf('YOUR WORD') > 0) {
        document.getElementById("image").src = src; 
    } else {
        document.getElementById("image").src = other_src; 
    }
}
</script>
</head>
<body>
<li class="">
  <ul class="item  highlightShoplift">
    <li class="title left">
      <img width="30" height="30" src="" id="image">
    </li>
    <li class="radio right has-pretty-child">
      <div class="clearfix prettyradio labelright  blue" role="radio" aria-checked="false" aria-disabled="false" "=" ">
        <input type="radio" value="shoplift " name="crime " style="display: none; ">
        <a href="# " role="presentation " tabindex="0 " class=" "></a>
        <label for="undefined " class=" "></label>
      </div>
    </li>
    <li class="bonus left ">
      Shoplift
    </li>
    <li class="points left ">
      <span class="desc ">-4 Nerve</span>
    </li>
    <li class="clear "></li>
  </ul>
</li>
</body>
</html>

无论如何，我不知道这是否是您正在寻找的。

如果源包含，则更改图像

4 个答案: