JavaScript не может изменить изображение используя attr

Question

Мой html код здесь, чтобы щелкнуть далее и изменить график. Я поместил файл 1.jpg, 2.jpg, 3.jpg и html в один файл.

Мой вопрос заключается в том, что я хочу изменить свой график на код $("#page1").attr("src", fname);.

Но он не может этого сделать вообще. Он всегда показывает 1.jpg.

<script>
var order = new Array('1.jpg', '2.jpg', '3.jpg');
var trial = 0; //current trial
document.write("STRING:");
$(document).ready(function(){
 ShowImage(trial);
});

function ShowImage(t) {
 $("#page1").show();
 var N = t+1; //counting from 1
 $(".progress").text('('+N+'/'+order.length+')');
}

function NextImage() {
 current = current + 1;
 $("#page1").hide();
 var fname=order[current];
 $("#page1").attr("src", fname);
 });
 ShowImage(current);
}

</script>

<style> .page {display: none;} </style> 

<div class="page" id="page1">
<img src=1.jpg><br>
<input type=radio name=f1 value=T> T
<input type=radio name=f1 value=F> F <br>
<a href="javascript:NextTrial()">Next</a> 
<span class="progress"></span>
</div>

<div class="page" id="page2">
<h3>All done!</h3>
</div>```

Answer 1

вы собираетесь изменить тег src из <img>, поэтому вы должны получить тег <img>. в вашем html теге <img> находится в <div id="page1">, поэтому вы должны использовать ключевое слово find, чтобы получить тег <img>, а затем изменить его src.

function NextImage() {
 current = current + 1;
 $("#page1").hide();
 var fname=order[current];
 $("#page1").find('img').attr("src", fname);   //this line should find the img tag and then change the src attr
 });
 ShowImage(current);
}