Здравствуй
<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);
});
});
Я пытаюсь напечатать "Красную рубашку" внутри
,
Но значение теста становится "0" внутри функции red();
Также, когда я объявляю переменную внутри функции red() (например, reddy..), она корректно используется как синяя.
Поэтому я хотел бы знать, какую ошибку я делаю, и как я могу пройти тест в функцию как есть.
благодаря
Вам нужно передать test
переменную в свою red
функцию, поэтому используйте:
$('.shirt').html(red(test));
вместо:
$('.shirt').html(red);
Вы передаете ссылку функции на метод html
, поэтому функция будет вызываться для каждого элемента с двумя параметрами; индекс элемента в объекте 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));
Вы не передаете какое-либо значение параметра для функции "красный". Так что оно принимает значение теста как "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 Fiddle: http://jsfiddle.net/NZBNW/2/
Ваш код с небольшим пояснением
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.