为啥我的 Javascript 函数只能工作几次？

Posted 2023-03-05

【中文标题】为啥我的 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，地图信息窗口弹出窗口还是源自菜单栏的弹出窗口？

【参考方案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();