我如何通过jquery和ajax替换图像（在div内）

I am trying to click on an image and change it to another image through jquery.

我试图点击图像并通过jquery将其更改为另一个图像。

When i step through the below code, on the serverside, the controller action fires and on the client side, i can see the correct html return in firebug watch window but the image doesn't change at all. any idea why this div is not updating?

当我逐步执行以下代码时,在服务器端,控制器操作触发,在客户端,我可以在firebug观察窗口中看到正确的html返回,但图像根本没有变化。知道为什么这个div没有更新?

original div:

<div class="inlineDiv" toggle="off" id="22"><img src="../../images/vote-favorite-off1.png" border="0"></div>

jquery code:

    $(document).ready(function() {
        $('div.inlineDiv').live('click', function() {

        var id = $(this).attr("id");
        var toggle = $(this).attr("toggle");

        var url = '/Tracker/Update?id=' + id + '&toggle=' + toggle;

        $.get(url, function(data) {
            $(this).html(data);
        });
    });
});

controller action:

  public ActionResult Update(int id, string toggle)
  {
       if (toggle == "off")
        {
            return Content("<img src='../../images/vote-favorite-on1.png' border=0'>");
        }
        return Content("<img src='../../images/vote-favorite-off1.png' border=0'>");
  }

2 个解决方案

#1

i believe the this in the get is referring to the get's function.

我相信get中的这个是指get的功能。

easier:

$(this).load(URL);

#2

$(this) isn't referring to the correct object at this point. Try assigning the object to a variable first, or just say $('div.inlineDiv').html(data)

$(this)此时并未指向正确的对象。首先尝试将对象分配给变量,或者只说$('div.inlineDiv')。html(data)

var objDiv=$(this);
    $.get(url, function(data) {
        objDiv.html(data);
    });

another method would be $('div.inlineDiv img').attr('src',returnedPath); but you'd have to update the controller action to return just the src path.

另一种方法是$('div.inlineDiv img')。attr('src',returnedPath);但是您必须更新控制器操作以仅返回src路径。

or as said below $('div.inlineDiv').load(URL);

或者如下所述$('div.inlineDiv')。load(URL);

#1