javascript - 变量显示在一个函数中，但没有显示在另一个 Jquery 中

Question

我将 PHP session 传递给变量以在 Jquery 代码中使用。下面，我在四个区域调用控制台日志。控制台日志编号 1 和 3 反射(reflect)了变量的值，没有问题。 2和4没有。我需要#4 具有值(value)，这样我就可以在条件中使用变量。我想这可能是一个范围问题，但我不明白为什么。寻找一些指导。

<script type="text/javascript">

  // GET VARIABLES THROUGH PHP SESSSION
  customerType = '<?php echo $customerType; ?>';
  myClicks = '<?php echo $myClicks; ?>';
  email = '<?php echo $email; ?>';

  console.log('1 ' + email);
  console.log('1 ' + myClicks);
  console.log('1 ' + customerType);

  //SET NUMBER OF ROWS TO DISPLAY AT A TIME

  $(document).ready(function () {

    rowsPerPage = 5;

    // GETTING DATA FROM FUNCTION BELOW
    getData();

    $('#load-more').click(function () {

      console.log('2 ' + email);
      console.log('2 ' + myClicks);
      console.log('2 ' + customerType);

      $('#load-more').html('Loading...');
      var rowID = Number($('#row-id').val());
      var allCount = Number($('#count').val());
      rowID += rowsPerPage;
      if (rowID <= allCount) {
        $('#row-id').val(rowID);
        getData();
      } else {
        $('#load-more').html('End Of Data');
        //$('#load-more').html('');
      }
    });

    /* REQUEST DATA */
    function getData () {

      console.log('3 ' + email);
      console.log('3 ' + myClicks);
      console.log('3 ' + customerType);

      var rowID = $('#row-id').val();
      var allCount = $('#count').val();
      $.ajax({
        url: 'promotions/newest-load-button-data.php',
        type: 'post',
        data: {
          rowID: rowID,
          rowsPerPage: rowsPerPage
        },
        dataType: 'json',
        success: function (response) {
          setTimeout(function () {
            loadData(response);
            $('#load-more').html('Load More');
          }, 1000);
        }
      });
    }

    /* LOAD DATA TO PAGE */

    function loadData (data) {

      console.log('4 ' + email);
      console.log('4 ' + myClicks);
      console.log('4 ' + customerType);

      var dataCount = data.length;

      for (var i = 0; i < dataCount; i++) {
        if (i == 0) {
          var allCount = data[i]['allcount'];
          $('#count').val(allCount);
        } else {
          var promoID = data[i]['promoid'];
          var promoName = data[i]['promoname'];
          var promoRefNum = data[i]['promorefnum'];
          var promoType = data[i]['promotype'];
          var theBanner = data[i]['thebanner'];

// Here I will use conditions based on email, customerType, and myClicks

          if (promoType == 'Banner') {
            $('#load-container').append('<div class="row-center-center padding-top-5 padding-bottom-2"><div>' + promoName + '</div></div>');
            $('#load-container').append('<div><div class="wrap-content"><img class="mobile-banner-scale" id="visitor-banner-click" src=' + theBanner + '></div></div>');
          }

          if (promoType == 'Video Banner') {
            $('#load-container').append('<div class="row-center-center padding-top-5 padding-bottom-2"><div>' + promoName + '</div></div>');
            $('#load-container').append('<div><video class="mobile-video-size" id="visitor-banner-click" src=' + theBanner + ' autoplay muted loop></video></div>');
          }
        }

        $('#load-more').html('Load More');
      }
    }
  });
</script>

Answer 1

As of jQuery 3.0 the recommended way to add a ready handler is the first method, $(fn). As noted in the Event section, the $(document).on("ready", fn) event form has slightly different semantics and was removed in jQuery 3.0.

此代码片段使用推荐的文档就绪处理程序工作。

    
        jQuery(function(){  //document.ready

            console.log('2 ' + email);
            console.log('2 ' + myClicks);
            console.log('2 ' + customerType);
            loadData('something');
        });

        customerType = 'test1';
        myClicks = 'test2';
        email = 'test3';

        function loadData (data) {
    
            console.log('4 ' + email);
            console.log('4 ' + myClicks);
            console.log('4 ' + customerType);
       }

    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>