Question

这是我的代码：

<script>
$(document).ready(function(){
    $('#likeHeart').on('click', function() {
        var clickedSoundId = $(this).attr( "soundId" );
        console.log(clickedSoundId);
        $.get("http://localhost:8000/like/"+clickedSoundId+"/", function(data, status){
            console.log("Data: " + data + "\nStatus: " + status);
            $(this).attr("src","http://localhost:8080/Icons/favorite.png" + '?' + Math.random());
            $(this).attr("srcset","http://localhost:8080/Icons/favorite.png" + '?' + Math.random());
            console.log($(this).attr('src'));
            console.log(data["count"]);
            $("#likeCount"+clickedSoundId).text(data["count"]);
        });
    });
});
</script>

这是具有相同id但不同soundId的多张图片

<img src="http://localhost:8080/Icons/like.png" srcset="http://localhost:8080/Icons/like.png" id="likeHeart" soundId="{{ s.id }}" height="15" width="15"><p id="likeCount{{s.id}}">{{s.nbLike}}</p><br>

var clickedSoundId = $(this).attr( "soundId" );

给我好的身份证。

但是

$(this).attr("src","http://localhost:8080/Icons/favorite.png" + '?' + Math.random());

不会从视觉上改变图像，但是当我执行：

        console.log($(this).attr('src'));

src已正确更改...

这是小提琴：

https://jsfiddle.net/bussiere/7fh5n9kd/

致谢

Answer 1

首先，不要对不同的元素使用相同的ID。这不是有效的HTML标记。使用类或其他属性。

让我们回到您的问题。尝试以下格式： data-soundId =“ {{s.id}}”

您可以使用 .data 选择器来获得此属性，如下所示： $（this）.data（“ soundid”）;

并且不要对 .data 使用大写字母。

示例：

$('.clickable').click(function(){
  var soundid = $(this).data('soundid');
  alert(soundid);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clickable" data-soundid="15">15</div>
<div class="clickable" data-soundid="20">20</div>
<div class="clickable" data-soundid="25">25</div>

Answer 2

我认为您不能选择具有 ID 的多个目标。每个ID不得超过一个。尝试给图像提供相同的类而不是ID

使用jQuery更改具有未知ID的图像的src

2 个答案: