jquery - 如何使用 jquery 和 ajax 通过单击按钮更改页面上的图像？

Question

我的 html 页面上有一个按钮，当我单击它时，我希望它异步更改页面上的特定图像。所以我有类似的东西：

<a href="/test/page"> button </a>

我想在这里改变我的形象：

<div id="container" style="display: none">
  <img src="/test/image.png" />
</div>

我想我想在这里使用 ajax，但我对 Web 开发很陌生，我不确定，建议将不胜感激。

注意：我希望在不加载新页面的情况下发生这种情况，只需重新加载图像。

Answer 1

$('a').click(function(e){
    e.preventDefault();

    $('img').attr("src","newURL");
});

Answer 2

我们在这个上不使用 AJAX 怎么样？

HTML：

<a href="#" class="imageChanger" data-imgsrc="/link/new/image.jpg"> Press me </a>
<a href="#" class="imageChanger" data-imgsrc="/link/new/image23.jpg"> Press me too! </a>
<div id="container">
   <img src="lalala.jpg">
</div>

JS：

$(function() {
  $(document).on("click", ".imageChanger", function(e) {
    e.preventDefault();

    newSrc = $(this).data("imgsrc");

    $("#container").empty().append( '<img src=" ' + newSrc + ' ">' );

  });
});

这是从头部输入的，因此可能无法正常工作。我会在早上检查它。

Answer 3

我将从查看 jquery 和 jquery-ui api 文档开始

http://api.jquery.com/jQuery.ajax/

http://jqueryui.com/demos/button/

你想要的是一个提交按钮，它将进行 ajax 调用并重新加载特定的 div。

关于 ajax 的问题是你从哪里得到图像。如果它来自后端服务器，您应该使用 ajax 调用。但是，如果它全部在客户端上，您只需进行普通的 java 脚本调用即可。

带有对某些后端服务器的 ajax 调用的按钮的粗略示例

<script>
$(function() {
    $( "input:submit", ".demo" ).button();
    $( "a", ".demo" ).click(function() {
           $.ajax({
               url: "some url call to get image",
               data: " any data you want passed",
               success: function(html) {
                       $("#demo").html(html); // html you want reloaded for the div. 
              }
    });
});
</script>



<div class="demo">


<input type="submit" value="A submit button">



</div><!-- End demo -->

Answer 4

var counter = 1;
$(function() {
var imgArray = 
new Array("slide/1.jpg","slide/2.jpg","slide/3.jpg","slide/4.jpg");
$(document).on("click", "#btnSubmit", function(e) {
 e.preventDefault();
 if(counter>=imgArray.length)
 {
 counter=0;
 }
 newSrc = imgArray[counter++];//   $(this).data("imgsrc");
 $("#container").empty().append( '<img src=" ' + newSrc + ' " class="image-1-1"  width="100%" height="400">' );

});
});

html

<div id="container" class="coffee-span-8 column-1">
<img src="/slide/1.jpg" class="image-1-1"  width="100%" height="400" ></img>
 </div>
 <div class="coffee-span-6"><form METHOD="LINK" ACTION="index.html">    <button id="btnSubmit" type="submit">next</button></FORM>
 </div>