Bild ändern, wenn die Quelle

Question

I enthält eine Liste, die wie, müssen

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

und ich sieht das Bild ändern. Ich muss es von /images/crimes/c.png zu http://medictests.com/wp-content/uploads/2011/05/checkmark.png

ändern, aber ich bin mir nicht sicher, wie. Verwenden von jquery/javascript.

Answer 1

Falls Sie ein id Attribut auf den Bild-Tag hinzufügen, wie

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

Dann können Sie direkt das Bild ändern src Attribute wie

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

und Verwenden von jquery

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

Answer 2

Usin g jQuery:

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

Beachten Sie, dass es besser ist, dem IMG eine Klasse und Ziel nur dieses bestimmte Bild zu geben.

Answer 3

Es auf viele Dinge hängt zum Beispiel was die Änderung, löst, was die Anforderung zur Hand ist usw.

Hier ist ein Beispiel-Snippet das Bild für eine Probe zu ändern Anforderung, sagen wir Ändern Sie das Bild nach einer vordefinierten Zeit mit JavaScript.

Jetzt, da wir es mit Plain-Vanilla-JavaScript erreichen können, hier könnten die Schritte sein:

• das Bildelement, die wir bei wollen (man denke über bestimmte Selektoren und combinators verwenden)
• Verstehen der Timeout-Periode
• ändern der src Attribut des Bildes auf dem neuen Bild-zu-Punkt

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>

---

die einen Schritt weiter gehen und sagen: Lassen Sie - wir nur das Bild ersetzen soll, wenn das src Attribut einen bestimmten Begriff enthält, sagen wir, Blume.

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 4

Das ist wirklich eine schlechte Frage, aber ich denke, dass Sie ein Bild ändern müssen, wenn sein SRC ein bestimmtes Wort enthält.

<!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> 

Egal, ich weiß nicht, ob das ist, was Sie suchen.