使用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')函數（專爲此設計）。