id

id

关注
发信
mysql - 在Snow Leopard上安装mysql gem的问题:未初始化的常量MysqlCompat::MysqlRes
arrays - 过滤对象数组
android - 查找当前Android键盘的语言
javascript - 如何使用纯JavaScript控制转换距离
javascript - 如何在玩笑/ enzyme 测试中测试axios获取请求功能？
jquery - Ajax重定向处理
javascript - 为什么jQuery选择器(“父>子”)跳过子项？
string - 在字符串上发送二进制数据包是否有优势？
javascript - 适用于Adobe LiveCycle工具的JavaScript表达式或正则表达式
html5 - HTML5 Canvas 在背景图像上进行缩放
angular - 下拉列表中未填充API数据
python - Python从字符串中清除HTML
git - VSO vNext Build中的Build.SourceVersion为空白
javascript - 将矩阵输出文本更改为西里尔unicode脚本
swift - 如何隐藏SQLite数据库文件，以便在iTunes文件共享中看不到它们

javascript - 变量超出范围了吗？

扫码查看

我的代码：

<html>

<head>

<script type="text/JavaScript" src="jquery-1.3.2.min.js"></script>
<script type="text/JavaScript" src="jquery.center.js"></script>
<script type="text/JavaScript">
    $(document).ready(function(){
        $('a').click(function(){
            popup_AskYN("Want me to tell you what 1 + 1 is?",function(){
                //popup_Info("It's 2, silly!");
            },function(){
                //popup_Info("I didn't want to, anyway!");
            });
        });
    });

    function popup_AskYN(msg,yes_fn,no_fn){
        $('body').append("<div id='popup'><p>"+msg+"</p><a id='popup_yes' href='#'>Yes!</a><a href='#' id='popup_no'>No.</a></div>");
        var yes_button = $('#popup_yes:last');
        var no_button = $('#popup_no:last');
        var popup = $('#popup:last');
        popup.center();

        yes_button.click(yes_fn);
        no_button.click(no_fn);

        yes_button.click(function(){
            popup.fadeOut('fast').remove();
        });
        no_button.click(function(){
            popup.fadeOut('fast').remove();
        });
    }

    function popup_Info(msg,callback){
        $('body').append("<div id='popup'><p>"+msg+"</p><a id='popup_ok' href='#'>Ok.</a></div>");
        var ok_button = $('#popup_ok:last');
        var popup = $('#popup:last');
        popup.center();

        ok_button.click(callback);

        ok_button.click(function(){
            popup.fadeOut('fast',function(){ $(self).remove(); });
        });
    }


</script>

<style type="text/css">
#popup {
    position:absolute;
    border:1px solid black;
}
#popup a {
    margin:10px;
}
</style>

</head>

<body>
<a href="#">Launch the popup!</a>
</body>




现在这很好用..除了当我有多个弹出窗口时。我将其范围缩小到每当我创建一个新的弹出窗口时，它就会更改yes_button，no_button，ok_button和popup的值。因此，当上一个弹出窗口尝试使用这些变量时，它们都指向新的弹出窗口而不是当前弹出窗口。由于所有的弹出窗口都具有相同的ID，因此我没有任何“独特”的标识。我认为简单地存储选择器就足够了，但是那是行不通的。我在这里能做什么？

编辑，添加了正确的ID，但仍然无法正常工作...：

<html>

    <head>
    <title>Call backs</title>

    <script type="text/JavaScript" src="jquery-1.3.2.min.js"></script>
    <script type="text/JavaScript" src="jquery.center.js"></script>
    <script type="text/JavaScript">
        $(document).ready(function(){
            $('a').click(function(){
                popup_AskYN("Want me to tell you what 1 + 1 is?",function(){
                    //popup_Info("It's 2, silly!");
                },function(){
                    //popup_Info("I didn't want to, anyway!");
                });
            });
        });

        var popup_AskYNId = 0;
        var popup_InfoId = 0;
        function popup_AskYN(msg,yes_fn,no_fn){
            popup_AskYNId = popup_AskYNId + 1;
            $('body').append("<div class='popup' id='"+popup_AskYNId+"popup_AskYN'><div class='popup_inner'><p>"+msg+"</p></div><div class='popup_options'><a class='popup_yes' id='"+popup_AskYNId+"popup_yes_AskYN' href='#'>Yes!</a><a href='#' class='popup_no' id='"+popup_AskYNId+"popup_no_AskYN' >No.</a></div></div>");
            popup = $('#'+popup_AskYNId+'popup_AskYN');
            yes_button = $('#'+popup_AskYNId+'popup_yes_AskYN');
            no_button = $('#'+popup_AskYNId+'popup_no_AskYN');

            popup.center();

            yes_button.click(yes_fn);
            no_button.click(no_fn);

            yes_button.click(function(){
                popup.fadeOut('fast').remove();
            });
            no_button.click(function(){
                popup.fadeOut('fast').remove();
            });
        }

        function popup_Info(msg,callback){
            $('body').append("<div id='popup'><div id='popup_inner'><p>"+msg+"</p></div><div id='popup_options'><a id='popup_ok' href='#'>Ok.</a></div></div>");
            ok_button = $('#popup_ok:last');
            popup = $('#popup:last');
            popup.center();

            ok_button.click(callback);

            ok_button.click(function(){
                popup.fadeOut('fast',function(){ $(self).remove(); });
            });
        }


    </script>

    <style type="text/css">

    .popup {
        position:absolute;
        border:1px solid black;
        padding:3px;
    }
    .popup_inner {
        border:1px solid black;
        padding:10px;
    }
    .popup_options {
        margin:0 auto;
    }
    .popup_options a {

        border:1px solid black;

        margin-top:3px;
        margin-left:3px;
        height:15px;
        width:75px;
        float:right;

        text-align:center;
        font-family:tahoma;
        font-size:0.8em;
        text-decoration:none;
        line-height:14px;
    }

    </style>

    </head>

    <body>
    <a href="#">Launch the popup!</a>
    </body>

</html>


找到了解决方案，但我对其进行了一些修改，以便可以，并且没有像旧版本一样可接受的功能。

    $(function() {
  $('a').click(function(e) {
    e.preventDefault();

    var num1 = Math.floor(Math.random()*11),
    num2 = Math.floor(Math.random()*11);

    popup_AskYN(
        "Want me to tell you what 1 + 1 is?",
        function(){
            $('body').append('its 2');
        },function(){
            $('body').append('Fine.');
        });;
  });

  $('.popup_yes').live('click', function(e) {
    e.preventDefault();

    $(this).closest('.popup').fadeOut('fast', function() {
      $(this).remove();
    });
  });
  $('.popup_no').live('click', function(e) {
    e.preventDefault();

    $(this).closest('.popup').fadeOut('fast', function() {
      $(this).remove();
    });
  });

});

function popup_AskYN(msg, yes, no){
  $('body').append("<div class='popup'><div class='popup_inner'><p>"+msg+"</p></div><div class='popup_options'><a class='popup_yes' href='#'>Yes!</a><a href='#' class='popup_no'>No.</a></div></div>");
  var yes_button = $('.popup_yes:last');
  var no_button = $('.popup_no:last');
  var popup = $('.popup:last');

  yes_button.click(yes);

  no_button.click(no);
}

最佳答案

如果我只是将所有ID更改为类，则对我来说这很好。但是，如果将弹出窗口放在屏幕的绝对中心，则不会使自己具有多个弹出窗口实例。我不得不注释掉居中/定位代码，以查看它是否有效。

我还建议当某人单击弹出窗口中的是或否链接时，答案将替换原始弹出窗口的内容，而不是创建新的弹出窗口。我看到您正在尝试使问题消失，然后再出现答案，但是请注意，在当前的实现中，原始弹出问题在动画结束之前已被删除，因此删除问题并创建新的弹出窗口没有任何优势带有答案的窗口，而不是仅仅替换内容。

如果您希望问题在答案出现之前淡出，一种选择是仅在动画完成后删除问题弹出窗口，这可以使用fadeOut的第二个参数来完成，后者是在动画完成时执行的回调。再说一次，尽管如此，这并不适合具有多个弹出问题实例。原因是因为答案弹出框与问题弹出框与删除问题并将答案附加到正文的方法无关。这也可以通过简单地将问题替换为答案来解决。如果仍然需要相同的淡入淡出效果，则可以淡出弹出窗口，然后更改其内容，然后再淡入。

这是您可以使用的代码版本，可以按照我的建议进行更改：

<html>
<head>
  <script type="text/JavaScript" src="http://code.jquery.com/jquery.js"></script>
  <script type="text/JavaScript">
    $(function() {
      $('a').click(function(e) {
        e.preventDefault();

        var num1 = Math.floor(Math.random()*11),
        num2 = Math.floor(Math.random()*11);

        popup_AskYN(
          "Want me to tell you what " + num1 + " + " + num2 + " is?",
          "It's " + (num1 + num2) + ", silly!",
          "I didn't want to, anyway!"
        );
      });

      $('.popup_ok').live('click', function(e) {
        e.preventDefault();

        $(this).closest('.popup').fadeOut('fast', function() {
          $(this).remove();
        });
      });
    });

    function popup_AskYN(msg, yes, no){
      $('body').append("<div class='popup'><p>"+msg+"</p><a class='popup_yes' href='#'>Yes!</a><a href='#' class='popup_no'>No.</a></div>");
      var yes_button = $('.popup_yes:last');
      var no_button = $('.popup_no:last');
      var popup = $('.popup:last');

      yes_button.click(function() {
        popup.html('<p>' + yes + '<a class="popup_ok" href="#">Ok.</a>');
      });

      no_button.click(function() {
        popup.html('<p>' + no + '<a class="popup_ok" href="#">Ok.</a>');
      });
    }
  </script>

  <style type="text/css">
  .popup {
    border:1px solid black;
    margin-bottom: 10px;
  }
  .popup a {
    margin:10px;
  }
  </style>
</head>

<body>
  <a href="#">Launch the popup!</a>
</body>

10-04 15:56
查看更多
Powered by LMLPHP ©2025 id 0.027658