0

HTMLページにボタンがあり、クリックするとページ上の特定の画像を非同期に変更したいと考えています。だから私は次のようなものを持っています:

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

そして、ここで私のイメージを変更したいと思います：

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

ここでは ajax を使用すると思われますが、私は Web 開発に非常に慣れていないため、よくわかりません。提案をいただければ幸いです。

注：新しいページをロードせずに、画像をリロードするだけでこれを実現したいと考えています。

4

4 に答える 4

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

    $('img').attr("src","newURL");
});
于 2012-04-17T13:50:13.847 に答える
0

まず、jqueryとjquery-uiapiのドキュメントを確認します。

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 -->
于 2012-04-17T14:01:20.093 に答える
0

これで 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 + ' ">' );

  });
});

これは頭​​から入力されるため、機能しない可能性があります。朝チェックしてみます。

于 2012-04-18T07:05:49.553 に答える