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]，这是正确的。它交替出现在＆＃34; notliked2.png＆＃34;和＆＃34; likes2.png＆＃34;当有人喜欢和不喜欢。但由于某些原因，更换图像源并不起作用。我甚至尝试更换整个HTML，但它仍然无法正常工作。有人知道发生了什么吗？

谢谢，

Albert Jin

编辑：这是视图代码。

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 sytax。你不能使用这样的静态函数：

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

我会替换当前的url，只替换url的动态部分，如下所示：

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

Answer 2

不确定$ .get响应的格式是什么（你没有在问题中显示），但是查看你的代码应该足够了......

$(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')函数（专为此设计）。

使用jQuery动态替换图像

2 个答案: