Was ist der richtige Weg, um das Src-Attribut in JQuery festzulegen?

Lesezeit: 3 Minuten

Angenommen, ich habe den folgenden HTML-Code:

<img id="foo" src="https://stackoverflow.com/questions/4390627/bar1.jpg"/>

Ich möchte die tauschen src zu bar2.jpg

Kann ich das einfach machen?

$("#foo").attr("src", "bar2.jpg");

Oder muss ich das tun?

$("#foo").removeAttr("src");
$("#foo").attr("src", "bar2.jpg");

Vielen Dank!

Benutzer-Avatar
Sarfraz

Wenn Sie dies tun:

$("#foo").attr("src", "bar2.jpg");

Der Vorherige src ist ersetzt.

Du brauchst also nicht:

$("#foo").removeAttr("src");

Sie können es hier bestätigen

Mach einfach .attr('src', 'foo') weil Sie a zuweisen src trotzdem. Entfernen Sie das Attribut nur, wenn Sie es nicht vollständig benötigen.

Das erste Wey ist in Ordnung, kein Grund, es zuerst zu entfernen.

$("#foo").attr("src", "bar2.jpg");

$.attr dient sowohl dazu, das vorhandene Attribut zu erhalten als auch zu ändern (je nachdem, ob es ein oder zwei Argumente gibt). Ihre Situation ist genau das, wofür die zweite Funktionalität gedacht ist, und das Attribut „src“ ist nichts Besonderes.

http://api.jquery.com/attr/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.main{
    position:relative;
}
.second{
position:absolute;
top:20px;
left:720px;
}
.third{
    position:absolute;
top:290px;
left:720px;
}
.fourth{
    position:absolute;
top:100px;
left:1030px;
}
.firstarrow{
    position:absolute;
top:20px;
left:1100px;
}
.secondarrow{
    position:absolute;
top:20px;
left:1030px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $(".firstarrow").on('click', function() {
   var pos1 = $('.first img').attr('src');
   var pos2 = $('.second img').attr('src');
   var pos3 = $('.third img').attr('src');
   var pos4 = $('.fourth img').attr('src');
   $('.third img').attr('src', pos1);
   $('.fourth img').attr('src', pos3);
   $('.second img').attr('src', pos4);
   $('.first img').attr('src', pos2);
});

  $(".secondarrow").on('click', function() {
   var pos1 = $('.first img').attr('src');
   var pos2 = $('.second img').attr('src');
   var pos3 = $('.third img').attr('src');
   var pos4 = $('.fourth img').attr('src');
   $('.third img').attr('src', pos4);
   $('.fourth img').attr('src', pos2);
   $('.second img').attr('src', pos1);
   $('.first img').attr('src', pos3);
});

});
</script>

</head>

<body>
<div class="main">
<div class="first">
<img src="img1.jpg" alt="" width="700" height="511" />
</div>
<div class="second">
<img src="img2.jpg" alt="" width="300" height="250" />
</div>
<div class="third">
<img src="img3.jpg" alt="" width="300" height="250" />
</div>
<div class="fourth">
<img src="img4.jpg" align="" width="300" height="400"  />
</div>
<a href="#"><div class="firstarrow"><img src="ar1.jpg" width="48" height="48" /></div></a>
<a href="#"><div class="secondarrow"><img src="ar2.jpg" width="48" height="48" /></div></a>
</div>

</body>
</html>

Sogar für mediaelement Spieler haben:

  $("#player5").attr("poster", "/images/poster/Azadi.jpg");

1206270cookie-checkWas ist der richtige Weg, um das Src-Attribut in JQuery festzulegen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy