how to change image with jquery-CodePudding

how can i change an image after running a jquery function? let me explain I have a slideToggle function connected to the click on a div element containing the text and the image of an arrow, this must change when clicked. The classic arrow that makes it clear that it is a click element that closes and opens

HTML

<div id="italia">
    CONCESSIONI NAZIONALI<img id="freccia" src="freccia_su.jpg"  >
</div>

JQUERY

$("#nazione").click(function(){
    $(".estero").slideToggle("slow", function() { 
        
     });
});

I tried adding this statement but it doesn't work

$('#freccia').attr('src','freccia_giu.jpg');

CodePudding user response：

Here is a working example of changing the image using links.

$(document).on("click", "#Change", function (){
$("#freccia").attr("src","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSEUPo5FVBSiJTygFAL273wRmA0DGMI1NGnku9ghDnNEf6w5MRLGk03_i51lWqhnwe1SWU&usqp=CAU");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="italia">
  <img id="freccia" src="https://cdn.42matters.com/sdk/developers.google.com.png"  >
</div>

<button type="button" id="Change">Change image</button>

In your case you should add \ to the beggining of your path in $('#freccia').attr('src','freccia_giu.jpg'); so it should look like this $('#freccia').attr('src','\freccia_giu.jpg');

CodePudding user response：

It should work if you put the expression $("#freccia").attr("src",<newurl>); in the right place:

let i=0;
$("#nazione").click(function(){
  $(".estero").slideToggle("slow", function() {  }); 
  $("#freccia").attr("src",`https://picsum.photos/id/${  i}/300/200`);
});

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<div id="italia">
CONCESSIONI NAZIONALI<img id="freccia" src="https://picsum.photos/id/0/300/200">
</div>
<button id="nazione">next image</button>