带有 .return 的 Jquery 数学答案

【问题标题】：Jquery Math with .return带有 .return 的 Jquery 数学
【发布时间】：2018-02-11 18:13:13
【问题描述】：

var john= 5

$(document).ready(function(){
    $('#he').append("<h1>" + $(john + 4).return + "</h1>")
})

我试图让它变成 9，但结果是不确定的。怎么修？是的，我确实意识到我可以只附加一个“9”，但我正在尝试学习如何使用 Jquery 进行非常基本的数学运算，你能告诉我如何通过函数来完成吗？

【问题讨论】：

不要在 jQuery 中包装表达式 - 它不是选择器。

标签： javascript jquery return

【解决方案1】：

var john = 5;
$('#he').append('<h1>' + (john + 4) + '</h1>');

【讨论】：

【解决方案2】：

嗯，你可以使用类似的东西

var john= 5

$(document).ready(function(){
    $('#he').append("<h1>" + (john + 4) + "</h1>")
})

【讨论】：

【解决方案3】：

只要把代码改成这样，

var john= 5

$(document).ready(function(){
    $('#he').append("<h1>" + (john + 4) + "</h1>")
})

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

【讨论】：

【解决方案4】：

您可以使用ES6 来提供另一种解决方案

var john = 5;

$(document).ready(function(){
    $('#he').append(`<h1>${john + 4}</h1>`);
})

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

希望这会对你有所帮助。

【讨论】：

【解决方案5】：

正如其他答案所表明的那样，在大多数情况下，没有必要使用 return 属性来显示一个简单的数学运算的结果，该运算将评估并产生一个可以显示的表达式。尽管如此，假设一个 div 元素的 id 为“he”，有几种方法可以利用 return 属性。可以专门使用event object 的该属性，其值为：

由此触发的事件处理程序返回的最后一个值事件，除非该值未定义。

可以合并此属性，如下所示：

var john = 5;

$(document).ready(function(){

    $( "button" ).click(function( event ) {
      return john + 4;
    });

    $( "button" ).click(function( event ) {
      $( "#he" ).append( "<h1>" + event.result + "</h1>");
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>john + 4 equals?</p>
<button>Display Result</button>
<div id="he"></div>

您可以做的另一件有趣的事情是将这样的属性分配给一个元素，然后将其用于一对打开和关闭 h1 标签的文本值，如下所示：

var john = 5;

$(document).ready(function(){
    $("#he").prop("return", john + 4);
    $("#he").append("<h1>" + $("#he").prop("return") + "</h1>");

});

见live code

【讨论】：