javascript - 函数不识别 .data() 值 jquery

Question

我有这段代码，如果点击 .comments取决于是否有先前的评论...它会加载评论 + 评论表单，或者只是 .LastComments 中的表单(无评论)

HTML

<div class="comment" data-number_comments="7" data-user="Joe">
  [Click to comment]
</div>

<div class="LastComments"></div>

JQUERY

$('.comment').on('click', function() {

  var user = $(this).data("user");
  var number_comments = $(this).data("number_comments");

  if (number_comments) {
    $(".LastComments").load(url, {
      vars
    }, /*Load_newform here*/ )

  } else {

  /*Load_newform here*/
  }

});

功能

function Load_newform() {
  form = "<form>Hi " + user + " post a comment </form>";
  $(".LastComments").append(form);
}

问题

该函数从 .data 中获取值返回所以它不显示 user value 和其他与我一起工作的人。如何检索值以使其正常工作？

Answer 1

如果在两个不同的范围内需要一个变量，您不能仅通过调用该变量来检索它。
在您的情况下，因为 Load_newform 是另一个函数(范围)，user accessibility 未设置。
考虑到这一点，您有一些方法可以实现:

---

将变量作为参数传递给第二个方法

$('.comment').on('click', function(){ 
    var user = $(this).data("user"); 
    var number_comments = $(this).data("number_comments"); 
    if(number_comments){
        $(".LastComments").load(Load_newform(user));
    }else{
        Load_newform(user);
    }
});

function Load_newform(user) {
    form = "<form>Hi "+user+" post a comment</form>";
    $(".LastComments").append(form);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="comment" data-number_comments="7" data-user="Joe">
    [Click to comment]
</div>

<div class="LastComments"></div>

在全局范围内创建变量

请记住，全局变量可以覆盖窗口变量!

var user;

$('.comment').on('click', function(){ 
    user = $(this).data("user"); 
    var number_comments = $(this).data("number_comments"); 
    if(number_comments){
        $(".LastComments").load(Load_newform());
    }else{
        Load_newform();
    }
});

function Load_newform() {
    form = "<form>Hi "+user+" post a comment</form>";
    $(".LastComments").append(form);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="comment" data-number_comments="7" data-user="Joe">
    [Click to comment]
</div>

<div class="LastComments"></div>

(无需调用变量名前的var即可自动创建一个全局变量)

$('.comment').on('click', function(){ 
    user = $(this).data("user"); 
    var number_comments = $(this).data("number_comments"); 
    if(number_comments){
        $(".LastComments").load(Load_newform());
    }else{
        Load_newform();
    }
});

function Load_newform() {
    form = "<form>Hi "+user+" post a comment</form>";
    $(".LastComments").append(form);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="comment" data-number_comments="7" data-user="Joe">
    [Click to comment]
</div>

<div class="LastComments"></div>

(甚至使用 window.variable name)

$('.comment').on('click', function(){ 
    window.user = $(this).data("user"); 
    var number_comments = $(this).data("number_comments"); 
    if(number_comments){
        $(".LastComments").load(Load_newform());
    }else{
        Load_newform();
    }
});

function Load_newform() {
    form = "<form>Hi "+user+" post a comment</form>";
    $(".LastComments").append(form);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="comment" data-number_comments="7" data-user="Joe">
    [Click to comment]
</div>

<div class="LastComments"></div>

在事件中创建函数

这不是最好的方法，因为如果您总是在单击时创建函数。

$('.comment').on('click', function(){ 
    function Load_newform() {
        console.log(user);
        form = "<form>Hi "+user+" post a comment</form>";
        $(".LastComments").append(form);
    }
    var user = $(this).data("user"); 
    var number_comments = $(this).data("number_comments"); 
    if(number_comments){
        $(".LastComments").load(Load_newform());
    }else{
        Load_newform();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="comment" data-number_comments="7" data-user="Joe">
    [Click to comment]
</div>

<div class="LastComments"></div>