未定义随机

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

我有一个关闭函数，但是当它运行时给了我"随机未定义"，当 alert（这是真的）下的代码运行时。为什么？当代码位于 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

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

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

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

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

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
  }
}

Answer 3

你可以这样使用

 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
            }
}