2

特定の条件下でimgのsrcを変更しようとしています。以前にalert（）で記述したので、条件が適切にtrueを返すことはわかっています。何らかの理由で、関数はimgのsrcを変更せず、ページを動的に更新していません。これは、私がjqueryライブラリを使用しているという事実と関係がありますか？まだstandjs構文を使用できると思います。これが私のコードスニペットとグーグルクロームからの対応するソースコードです。

.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>
4

2 に答える 2

0

jqueryを使用しているので、jquery idセレクター$（ "＃id"）やjquery .attr関数を使用してみましたか？

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

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

于 2012-07-30T20:47:59.293 に答える
0

ドキュメントが既にロードされているため、ページのロード後に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がtrueの場合、赤いハートが表示され、プレーンなハートが非表示になります。

于 2013-03-20T01:34:34.977 に答える