为什么我的JavaScript函数只有有时候能够工作？

Question

我的沙盒在这里：http://9.latest.truxmap.appspot.com/

首先，在地图上点击一个标记（如果页面加载时没有标记，请检查导航小部件中的“即将开业的美食车”框）。然后进入“评论”选项卡。

在GWT中，每次打开标记时，我都会调用JavaScript函数resizeReviewTab()，该函数会纠正由于状态和评论选项卡中的内容是动态的而引起的样式问题。如果JavaScript有效，则您将看到星星而不是在“评论”选项卡中的右侧浮动的单选按钮。否则，您将看到普通的单选按钮。

我无法弄清楚当标记未正确打开时会发生什么。它怎么会有时可以工作，有时不能，然后在几个不同的标记之后又可以工作？这是被调用的函数：

function resizeReviewTab(){ 

    $('#content').text(""); 

    $('.statusWindowB').css('height', $('.statusWindowA').css('height'));                   

    $('.name-sliding').focus(function() {

        $('.name-label-sliding').animate({ marginLeft: "133px" }, "fast");

            if($(this).val() == "name")
                $(this).val() == "";

        }).blur(function() {

            if($(this).val() == "") {
                $(this).val() == "name";
                $('.name-label-sliding').animate({ marginLeft: "12px" }, "fast");
            }
        });     

    $('.content-sliding').focus(function() {
            $('.content-label-sliding').fadeOut("slow");
    });

    starify();  
} 

starify()是jQuery插件jquery.stars的javascript代码，稍作修改后可在此处查看：http://9.latest.truxmap.appspot.com/lib/jquery.rating.js。

我需要调用这个函数，因为如果仅在html文档开头加载它，那么通过点击地图创建的所有信息窗口都不会将其单选按钮更改为星形评分。

这相当麻烦，期待您的回复。谢谢！

- D-Nice

---

有一个带有工作演示和源代码的问题？我一定是在做梦 :) 今天回家后我一定会仔细研究这个问题（调试GWT + JS可能很麻烦 :/）。顺便问一下，你是如何调用函数resizeReviewTab()的呢？ - Igor Klimer

无法在Firefox中重现，但是顺便提一下，关闭弹出窗口的X按钮没有关闭弹出窗口。 - Tim Banks

@Igor，在打开信息窗口后，我调用resizeReviewTab()。resizeReviewTab()在GWT中定义为JSNI函数，有一行代码：resizeReviewTab(); @TB，是地图信息窗口弹出还是菜单栏弹出的弹窗？ - D-Nice

Answer 1

这些比特肯定是损坏的。

if($(this).val() == "name")
    // next line is checking whether val equals ""
    // we already know it equals "name"
    // so it returns false(which is discarded)
    $(this).val() == ""; "name" ,

并且

if($(this).val() == "") {
    // next line is checking whether val equals "name"
    // we already know it equals ""
    // so it returns false(which is discarded)
    $(this).val() == "name";
    $('.name-label-sliding').animate({ marginLeft: "12px" }, "fast");
}

我想你的意思是

if($(this).val() == "name")
    $(this).val(''); // sets val to nothing

并且

if($(this).val() == "") {
    $(this).val("name"); // sets val to "name"
    $('.name-label-sliding').animate({ marginLeft: "12px" }, "fast");
}

- meouw

---

这是直接从一个jQuery插件中复制的--但你肯定是对的，它没有太多意义。 - D-Nice

Answer 2

@amurra和@meouw给出的两个答案都是有效的，但在未来可能会引起问题。然而，对于OP提出的问题，答案是GWT每次更改活动单元格时都会调用SelectionChangedHandler两次--一次在取消选择单元格时，一次在重新选择另一个单元格时。这导致javascript函数被连续调用两次，从而导致不良行为。非常感谢本帖中的帮助！

- D-Nice

Answer 3

如果一个函数被多次调用，您可能希望在绑定之前解除绑定事件。这将有助于防止多个绑定，从而导致奇怪和不一致的结果。

function resizeReviewTab(){ 

$('#content').text(""); 

$('.statusWindowB').css('height',$('.statusWindowA').css('height'));                   

$('.name-sliding').unbind("focus").focus(function() {

    $('.name-label-sliding').animate({ marginLeft: "133px" }, "fast");

        if($(this).val() == "name")
            $(this).val() == "";

    }).unbind("blur").blur(function() {

        if($(this).val() == "") {
            $(this).val() == "name";
            $('.name-label-sliding').animate({ marginLeft: "12px" }, "fast");
        }
    });     

$('.content-sliding').unbind("focus").focus(function() {
        $('.content-label-sliding').fadeOut("slow");
});

starify();  

}

- amurra