使用jQuery动态替换图像

Question

我试图实现一个类似按钮，点击时改变颜色。我试图用jQuery动态替换图片。

<div class = "col-sm-10" style = "margin-top: 2%"> 
    <input style = "width : 4%; height: 4%" type = "image" id = {{schedule.id}} + "image" class = "likes" 
    data-scheduleid = "{{schedule.id}}" data-user = "{{curruser.person.id}}" 
    src = "{% static 'img/notliked2.png' %}"/> 
</div> 

这是作为按钮被按下的图像文件。基本上，我试图改变点击图像文件。

$(document).ready(function() { 
    $('.likes').click(function(e){ 
    var sched_id; 
    var curruser; 
    sched_id = $(this).attr("data-scheduleid"); 
    curruser_id = $(this).attr("data-user"); 
    $.get('/profiles/like_schedule/', {schedule_id: sched_id, current_user: curruser_id}, function(data){ 
     var first = data.split("/") 
     $('#' + sched_id).html(first[0]); 
     console.log(first[1]) 
     //$('#likes').html("<input style = 'width : 4%; height: 4%' type = 'image' id = {{schedule.id}} class = 'likes' data-scheduleid = '{{schedule.id}}' data-user = '{{curruser.person.id}}' src = {% static 'img/" + first[1] + "' %}/>"); 
     $('.' + sched_id + "image").attr("src", "{% static 'img/" + first[1] + "' %}") 
     e.preventDefault(); 
    }); 
    }); 
}); 

这是jQuery。我首先登录了[1]，它是正确的。当有人喜欢和不喜欢时，它在“notliked2.png”和“liked2.png”之间交替。但出于某种原因，替换图像源不起作用。我什至尝试更换整个HTML，但它仍然无法正常工作。有人知道发生了什么吗？

谢谢

阿尔伯特金

编辑： 这里是意见代码。

def like_schedule(request): 
    sched_id = None 
    if request.method == 'GET': 
     sched_id = request.GET['schedule_id'] 
     curruser_id = request.GET['current_user'] 
    likes = 0 
    liked = "liked2.png" 
    if sched_id: 
     sched = schedules.objects.get(id = int(sched_id)) 
     curruser = person.objects.get(id = int(curruser_id)) 
     if curruser in sched.person_likes.all(): 
      liked = "notliked2.png" 
      sched.likes -= 1 
      sched.person_likes.remove(curruser) 
     else: 
      sched.likes += 1 
      sched.person_likes.add(curruser) 
     likes = sched.likes 
     sched.save() 
    return HttpResponse(str(likes) + "/" + str(liked)) 

至于重复的帖子，我确实尝试过，但他们不工作。

Answer 1

你在你的javascript代码中使用django语法。你不能这样使用静态函数：

$('.' + sched_id + "image").attr("src", "{% static 'img/" + first[1] + "' %}")

我会取代目前的网址，只更换URL的动态部分，像这样：

var src = $('.' + sched_id + "image").attr("src"); 
$('.' + sched_id + "image").attr("src", src.slice(0, src.indexOf('img/')) + 'img/" + first[1]); 

Answer 2

不知道的是怎样的在$。获得响应（你不显示它的问题），而是看你的代码，这应该是足够的格式...

$(document).ready(function() { 

    $('.likes').click(function(e) { 

     e.preventDefault(); 

     var $img = $(this); 

     $.get('/profiles/like_schedule/',{ schedule_id: $img.data("scheduleid"), current_user: $img.data("user") }, function(data) { 
      $img.attr('src','img/' + data.split("/")[1]) 
     }); 
    }); 
}); 

更多钞票的一个问题是，你有一个缓存问题，所以你的调用没有被执行。如果这是你的情况，你可以强迫你的服务器来执行呼叫只是增加了一些额外的见异思迁参数...

$.get('/profiles/like_schedule/',{ dummy: (new Date()).getTime(), schedule_id: $img.data("scheduleid"), current_user: $img.data("user") }, function(data) { 
    $img.attr('src','img/' + data.split("/")[1]) 
}); 

注意：当你想在jQuery的一个data-whatever属性的值，你有.data('whatever')函数（专为此设计）。