随机未定义

Question

我有一个使用Math.random生成随机ID的模态。

    function new_modal(head, content, button){

    var random = Math.floor(1000 + Math.random() * 9000);

    var modal_html = '<div id="myModal_'+ random +'">' +
     '<div id="outer">' +
      '<div id="inner">' +
       '<div id="top">'+head+'</div>' +
        '<span class="bOk"><img class="btnClose" src="#"></span>' +
       '<div class="modalCnt">'+content+'</div>' +
       button +        
      '</div> <!-- Inner -->' +
     '</div> <!-- Outer -->' +
    '</div>';

    $('body').append(modal_html);
  // Close the Modal
    $('#myModal_'+ random +' span').on('click', closeFunction);
    return 'myModal_' + random;  

}

我有一个近距离的功能，但是当运行时给我＆＃34;随机未定义＆＃34;，当警报下的代码（它是真的）运行时。这是为什么？当代码位于new_modal函数下时，它工作得很完美，但是当我把它放在函数之外并进入它自己的函数时，它就不起作用了。

    function closeFunction() {
    var check = $(this);
        if(check.hasClass("bOk") || check.hasClass("btnText") === true) {
            alert("It's true");
            $(this).closest('#myModal_'+ random).hide();
        } 
        else {
            alert("It's false, do something else");
            return false
            }
}

Answer 1

它被称为变量范围。 :) 如果在一个函数中声明一个变量（使用var关键字），则在另一个函数中无法访问它。 如果你想在两个函数中使用相同的随机函数，要么全局声明它（在函数之前），要么通过参数传递它。

https://www.w3schools.com/js/js_scope.asp

Answer 2

你可以这样使用

 var random="";
 function new_modal(head, content, button){

     random = Math.floor(1000 + Math.random() * 9000);

    var modal_html = '<div id="myModal_'+ random +'">' +
     '<div id="outer">' +
      '<div id="inner">' +
       '<div id="top">'+head+'</div>' +
        '<span class="bOk"><img class="btnClose" src="#"></span>' +
       '<div class="modalCnt">'+content+'</div>' +
       button +        
      '</div> <!-- Inner -->' +
     '</div> <!-- Outer -->' +
    '</div>';

    $('body').append(modal_html);
  // Close the Modal
    $('#myModal_'+ random +' span').on('click', closeFunction);
    return 'myModal_' + random;  

}

function closeFunction() {
    var check = $(this);
        if(check.hasClass("bOk") || check.hasClass("btnText") === true) {
            alert("It's true");
            $(this).closest('#myModal_'+ random).hide();
        } 
        else {
            alert("It's false, do something else");
            return false
            }
}

Answer 3

正如vicbyte指出的那样，这是一个范围问题，random仅存在于new_modal函数内部，因此无法在此函数外部访问它。您可以直接在.on调用中嵌入函数，如下所示：

＆＃13;

＆＃13;

function new_modal(head, content, button) {

  var random = Math.floor(1000 + Math.random() * 9000);

  var modal_html = '<div id="myModal_' + random + '">' +
    '<div id="outer">' +
    '<div id="inner">' +
    '<div id="top">' + head + '</div>' +
    '<span class="bOk"><img class="btnClose" src="#"></span>' +
    '<div class="modalCnt">' + content + '</div>' +
    button +
    '</div> <!-- Inner -->' +
    '</div> <!-- Outer -->' +
    '</div>';

  $('body').append(modal_html);

  // Close the Modal
  $('#myModal_' + random + ' span').on('click', function() {
    var check = $(this);
    if (check.hasClass("bOk") || check.hasClass("btnText") === true) {
      alert("It's true");
      $(this).closest('#myModal_' + random).hide();
    } else {
      alert("It's false, do something else");
      return false
    }
  });

  return 'myModal_' + random;
}

＆＃13;

＆＃13;

＆＃13;

我更喜欢这种方法而不是全局变量，因为您不会污染全局范围并允许您同时打开多个模态。

但是因为你需要把这个函数放在外面，所以创建一个这样的闭包：

＆＃13;

＆＃13;

function new_modal(head, content, button) {

  var random = Math.floor(1000 + Math.random() * 9000);

  var modal_html = '<div id="myModal_' + random + '">' +
    '<div id="outer">' +
    '<div id="inner">' +
    '<div id="top">' + head + '</div>' +
    '<span class="bOk"><img class="btnClose" src="#"></span>' +
    '<div class="modalCnt">' + content + '</div>' +
    button +
    '</div> <!-- Inner -->' +
    '</div> <!-- Outer -->' +
    '</div>';

  $('body').append(modal_html);

  // Close the Modal
  $('#myModal_' + random + ' span').on('click', function () {
    closeModal($(this), random);
  });

  return 'myModal_' + random;
}

function closeModal(element, random) {
  var check = element;
  if (check.hasClass("bOk") || check.hasClass("btnText") === true) {
    alert("It's true");
    check.closest('#myModal_' + random).hide();
  } else {
    alert("It's false, do something else");
    return false
  }
}

＆＃13;

＆＃13;

＆＃13;