函数不识别.data（）值jquery

Question

我有这个代码，如果点击.comments取决于是否有先前的评论...它会在.LastComments <中加载评论+评论表单或只是表单（没有评论） / p>

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值以及我正在使用的其他值。如何检索值以使其正常工作？

Answer 1

如果在两个不同的范围中需要变量，则不能仅通过调用变量来检索它。
在您的情况下，由于Load_newform是另一个函数（范围），{{1} } acessibility没有设置它。
考虑到这一点，你有一些方法可以实现它：

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

user

$('.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();
    }
});

Answer 2

尝试使用以下代码：

1）通过添加一行来获取用户变量值[即var user = $（this）.data（“user”）;]

function Load_newform() {
  var user = $(this).data("user"); //Initialize user variable here.
  var form = "<form>Hi " + user + " post a comment </form>";
  $(".LastComments").append(form);
}

谢谢！