Question

您好

    <h2 id="h2">click me </h2>
    <p class="shirt"> </p>

    var test = "reddish";  // Global scope ??
    var hm;

    console.log(test); //value is 'reddish' here 

    function red(test) // passing 'reddish'
    {
    var reddy= "blue"; // local scope - using this another var produces blue shirt 
    console.log(test);  // i dont understand how it is 0 here 
    hm =test + "shirt";  
    return hm;
    }


    $(function(){
      $('#h2').click(function(){
         $('.shirt').html(red);

      });
    });

我正在尝试打印＆＃34;红色衬衫＆＃34;在里面

。

但是测试的价值变成了＆＃39; 0＆＃39;内部函数red（）;

当我在函数red（）中声明一个变量（例如reddy ..）时，它被正确地用作蓝色。

所以我想知道我在做什么错误以及如何将测试传递给函数。

由于

Answer 1

您需要将test变量传递到red函数中，因此请使用：

$('.shirt').html(red(test));

而不是：

$('.shirt').html(red);

<强> Updated Fiddle

Answer 2

您正在将函数引用传递给html method，因此将为具有两个参数的每个元素调用该函数; jQuery对象中元素的索引和元素的当前HTML代码。

与循环遍历jQuery对象中的元素并为每个元素调用函数以获取要放入元素的HTML代码相同：

var j = $('.shirt');
for (var i = 0; i < j.length; i++) {
  j.eq(i).html(red(i, j.eq(i).html()));
}

由于函数接受一个参数，它将是jQuery对象中元素的索引，在这种情况下为零，因为只有一个元素。

函数中的参数test与全局范围中的变量test不同。正如您为它们命名的那样，该参数将为函数内部的代码隐藏全局变量。

要使参数test从全局变量test获取值，您需要使用该值调用该函数：

$('.shirt').html(red(test));

Answer 3

您的代码稍加解释

var test = "reddish";  // Global scope - the var is saved on the window.
console.log(test); // same as console.log(window.test)
function red(test) // you declared a function with an input param named test. this is not the same test.

console.log(test);  // test is nothing in this case since you called the red function with no param.

将通话更改为：

        $('.shirt').html(red(test)); // call function red with the correct input param.

Answer 4

您没有将任何参数值传递给函数“red”。因此，它将测试值设为“0” 如果传递任何值，则它将打印该值而不是“0”。

代码：

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript" src="jquery.js"></script>
 </head>
 <body>
  <h2 id="h2">click me </h2>
  <p class="shirt"> </p>
      <script type="text/javascript">
         var test = "reddish"; // Global scope ??
         var hm;
         console.log(test);
         function red(test) {
           var reddy = "blue"; // local scope - using this var produces blue shirt 
           console.log(test);
           hm = test + "shirt";
           return hm;
        }


     $(function() {
       $('#h2').click(function() {
         $('.shirt').html(red(test));
       });
     });
  </script>
 </body>
</html>

JS小提琴：http://jsfiddle.net/NZBNW/2/

JS变量的范围 - 内部函数

4 个答案: