为什么我的 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 文档的开头，通过单击地图创建的任何信息窗口都不会将其单选按钮更改为星形。

这个问题有点麻烦，期待您的回复。谢谢！

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");
}

Answer 2

@amurra 和 @meouw 给出的两个答案是有效的，并且可能会在将来引起问题。然而，OP中提出的问题的答案是，每次活动单元格发生变化时，GWT都会调用SelectionChangedHandler两次——一次是在取消选择一个单元格时，一次是在另一个单元格被选中时。重新选择。这导致 javascript 函数被连续调用两次，从而导致令人讨厌的行为。非常感谢您在此线程中的帮助！

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();  

}