为什么我的 Javascript 函数只能工作几次？答案

【问题标题】：Why does my Javascript function only work SOME times?为什么我的 Javascript 函数只能工作几次？
【发布时间】：2011-04-13 04:08:47
【问题描述】：

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

首先点击地图上的标记（如果页面加载时没有标记，请选中导航小部件中的“食品卡车即将开放”框）。接下来转到“评论”标签。

在 GWT 中，每次打开标记时，我都会调用 javascript 函数 resizeReviewTab() 来纠正由于状态和评论选项卡中的内容是动态的而出现的样式问题。如果 Javascript 工作正常，那么您将在“评论”选项卡的文本区域正上方看到 STARS 而不是单选按钮。否则，您将看到普通的单选按钮。

我不知道当标记没有正确打开时会发生什么。它怎么会工作一次，然后不能再次工作，然后在几个不同的标记后再次工作？这是调用的函数：

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 文档的开头加载它，通过单击地图创建的任何信息窗口都不会将其单选按钮变为星号。

这很麻烦，我期待您的回复。谢谢！

【问题讨论】：

关于一个可以使用的演示和源代码的问题？我一定是在做梦 :) 我今天回家后肯定会研究这个（调试 GWT + JS 可以是 PITA :/）。 PS：你到底是怎么调用函数resizeReviewTab()的？
无法在 Firefox 中重现，但请注意，关闭弹出窗口的 X 不会关闭弹出窗口。
@Igor，我在打开信息窗口后调用 resizeReviewTab()。 resizeReviewTab() 在 GWT 中被定义为一个 JSNI 函数，只有一行： resizeReviewTab(); @TB，地图信息窗口弹出窗口还是源自菜单栏的弹出窗口？

标签： javascript jquery gwt jquery-plugins jquery-selectors

【解决方案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");
}

【讨论】：

这是直接从一个 jQuery 插件复制而来的——但你绝对是对的，它没有多大意义。

【解决方案2】：

@amurra 和@meouw 给出的两个答案是有效的，将来可能会引起问题。但是，在 OP 中提出的问题的答案是 GWT 调用SelectionChangedHandler TWICE，每次更改活动单元格时——一次是在取消选择一个单元格时，一次是在重新选择另一个单元格时。这导致javascript函数被调用两次，背靠背，这导致了令人讨厌的行为。非常感谢这个帖子的帮助！

【讨论】：

【解决方案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();

}

【讨论】：