Question

我试图在某种条件下更改img的src。我知道条件适当地返回true，因为我之前在alert（）中写道。由于某种原因，该函数不会更改img的src并动态更新页面。这可能与我使用jquery库这一事实有关吗？我认为你仍然可以使用stand js语法。这是我的代码片段和谷歌浏览器的相应源代码。

.gsp：

<script type="text/javascript">
function onSuccess(data){
    if(data.hasHearted){
        document.getElementById("changer${user.id}").src = "${resource(dir: "images/images", file: "heart_red.png")}";
    }       
}

<figcaption id="secondcap" onClick="${remoteFunction(controller:'user', action:'heart', onSuccess: 'onSuccess(data)', params:[userID:user.id])}">               
            <img id="changer${user.id}" src="${resource(dir: "images/images", file: "heart.png")}" alt="heart">
</figcaption>

Chrome源代码（我为隐私省略了一些内容）：

<script type="text/javascript">
function onSuccess(data){
    if(data.hasHearted){
        $('#changer3').attr('src','/Personably/static/images/images/heart_red.png');
    }       
}
</script>

<div class="persons">   
<figure class="user_image">         
    <img class="user_profile_pic" src="omitted for privacy..." onmouseover="jQuery.ajax({type:'POST',data:{'userID': '3'}, url:'/Personably/user/hasHearted',success:function(data,textStatus){onSuccess(data);},error:function(XMLHttpRequest,textStatus,errorThrown){}});"/>  
    <figcaption id="firstcap">
            Omitted for privacy...
    </figcaption>               
    <figcaption id="secondcap" onClick="jQuery.ajax({type:'POST',data:{'userID': '3'}, url:'/Personably/user/heart',success:function(data,textStatus){onSuccess(data);},error:function(XMLHttpRequest,textStatus,errorThrown){}});">                
            <img id="changer3" src="/Personably/static/images/images/heart.png" alt="heart">
    </figcaption>
</figure>
</div>

Answer 1

由于您使用的是jquery，您是否尝试过使用jquery id selector $（“＃id”）和/或jquery .attr函数？

http://api.jquery.com/id-selector/

http://api.jquery.com/attr/#attr2

Answer 2

我不确定在加载页面后更改src属性会改变用户看到的内容，即使它更改了代码，因为文档已经加载了。

相反，您应该将两个图像（heart.png和heart_red.png）放在页面上，然后根据控制器操作的输出隐藏/取消隐藏它们的样式。 jquery .toggle（Boolean）方法对于这样的东西非常有用。 http://api.jquery.com/toggle/

在JavaScript函数中，您可以使用以下内容：

$('#heart3').toggle(!data.hearted);
$('#heart_red3').toggle(data.hearted);

然后，当data.hearted为真时，红心会显示，而平心会隐藏。

Grails：改变img的src的JS函数没有响应

2 个答案: