Javascript - 从函数调用变量

Question

我有这个单选按钮，如果选中，我希望它显示 2 个警报，显示 ( item="shoes" ( 一个来自本地，另一个来自全局，警报只显示一个的事实意味着变量在全局上仍然为空。

/*Empty item*/
var item = '';
/*Function selection item*/
function selection(select) {
var item = select;
alert(item);
}
/*If radio button selected item='shoes'*/
$('input[name="selection"]').click(function() {
if ($(this).is(':checked')) {
selection('shoes');
}
});
/*Alert on item if not empty*/
if (item !== '') {
alert(item); /*NOT WORKING*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<input type="radio" name="selection" id="shoes" value="shoes">Shoes<br>

如何将变量从局部范围转移到全局范围？ 请不要将我标记为二重奏，只有当您确定另一个主题可以解决我的问题时。谢谢

Answer 1

虽然这将解决您的问题，但我敦促您考虑考虑一种不涉及此类全局状态的方法。

有两个问题。 首先，您在函数中重新声明了item变量，因此您有一个更改的本地副本，而不是全局副本。 其次，您没有在更改侦听器中检查空，而只是在开始时检查。

更好的缩进可能会清楚地表明这一点。

/*Empty item*/
var item= ''; 
/*Function selection item*/
function selection(select){
item = select;
alert(item);
}
/*If radio button selected item='shoes'*/
$('input[name="selection"]').click(function(){
if ($(this).is(':checked')){
selection('shoes');
}	
/*Alert on item if not empty*/
if (item!==''){
alert(item); /*WORKING NOW THAT IT'S IN THE RIGHT PLACE*/
}           
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
<input type="radio" name="selection" id="shoes" value="shoes">Shoes<br>

Answer 2

首先，javascript是在页面加载上运行的。因此，您已在项目变量中设置了空值var item = '';并在下面进行了检查

if (item != '') {
alert(item); /*NOT WORKING*/
}

此代码。在页面加载时，所有脚本都将执行，包括以下代码，

if (item != '') {
alert(item); /*NOT WORKING*/
}

因此，选中单选按钮后未运行上述代码。

但是，我们可以像下面这样做，请接受它。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<input type="radio" name="selection" id="shoes" value="shoes">Shoes<br>
<script type="text/javascript">
/*Empty item*/
var item = '';
/*Function selection item*/
function selection(select) {
item = select;
alert(item);
sample();
}
function sample() {
alert(item);
}
/*If radio button selected item='shoes'*/
$('input[name="selection"]').click(function() {
if ($(this).is(':checked')) {
selection('shoes');
}
});
</script>

Answer 3

您应该在单击处理程序函数中具有警报。也不要在函数中重新声明变量item，这将创建一个作用域为函数的全新变量：

/*Empty item*/
var item= ''; 
/*Function selection item*/
function selection(select){
item = select;
alert(item);
}
/*If radio button selected item='shoes'*/
$('input[name="selection"]').click(function(){
if ($(this).is(':checked')){         
selection('shoes');            
}	
/*Alert on item if not empty*/
if(item!==''){
alert(item); /*NOT WORKING*/
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
<input type="radio" name="selection" id="shoes" value="shoes">Shoes<br>

Answer 4

如果要"将变量从局部范围转移到全局范围"，请使用 return。

var item = '';
function selection(select) {
var item = select;
alert(item);
return item; //<========
}
$('input[name="selection"]').click(function() {
if ($(this).is(':checked')) {
item = selection('shoes'); //<========
}
});
if (item !== '') {
alert(item); 
}

Answer 5

您已经声明了两次变量

var item= ''; 

以及您的功能。因此，请将您的函数更改为

function selection(select) {
item = select;
alert(item);
if (item !== '') {
alert(item); /*NOT WORKING*/
}

}

第二个问题是，点击事件后警报永远不会到达。所以把它移到了函数中

这是小提琴：https://jsfiddle.net/1x8pbd3L/