IF 在 Chrome 中返回 true，但在 Safari 中返回 false

IF Returns True in Chrome, but False in Safari

本文关键字：返回 但在 Safari false true IF Chrome      更新时间：2023-09-26

我的javascript函数在Chrome/Firefox与Safari/Opera中的计算方式不同。关于我显示/隐藏的总体目标有很多答案（即这里）。在这种情况下，我宁愿不使用jQuery。无论如何，我想解决的主要问题是条件在所有浏览器中都返回相同的内容。

如果我在Chrome或Firefox中运行我的代码，我会收到警报："Foo-新功能运行。如果我在 Safari 或 Opera 中运行相同的代码，我会收到警报："Foo - Else 函数运行。

我不知道为什么这是特定于浏览器的。如果在其他地方解决，我很高兴去阅读一些额外的线程或文档，但我似乎无法弄清楚。

编辑：根据请求，代码简化为仅显示相关部分。

function bar(){
	var addGiftVal = document.forms["subscribe"]["addGift"].value;
	if (addGiftVal == "yes"){
		alert("Bar - Yes Function Ran.");
	}
	
	else {
		alert("Bar - Else Function Ran.");
	}
}
function foo(){
	var subTypeVal = document.forms["subscribe"]["sub_type"].value;
	var subShipVal = document.forms["subscribe"]["ship_address_check"].value;
	if (subTypeVal == "renewal"){
		alert("Foo - Renewal Function Ran.");
		}
	
	else if (subTypeVal == "new"){
		alert("Foo - New Function Ran.");
		}
	
	else {
		alert("Foo - Else Function Ran.");
		}
		
}
<body onLoad="foo();">
<form name="subscribe" id="subForm">
<p><input type="radio" name="sub_type" value="new" id="subf_new" checked="checked" onclick="foo();"> <label for="subf_new">New</label>  
<input type="radio" name="sub_type" value="renewal" id="subf_renewal" onclick="foo();"> <label for="subf_renewal">Renewal</label>   
<input type="radio" name="sub_type" value="gift" id="subf_gift" onclick="foo();"> <label for="subf_gift">Gift</label>    </p>
<p><input type="radio" name="ship_address_check" id="subf_same" value="same" checked="checked"  onclick="foo();"><label for="subf_same">Same</label> </p>
<p><input type="radio" name="ship_address_check" id="subf_different" value="different"  onclick="foo();"><label for="subf_different">Different</label> </p>
<p>Yes or No?</p>
<input type="radio" name="addGift" id="subf_yes" value="yes" onclick="bar();"><label for="subf_yes">Yes</label> 
<input type="radio" name="addGift" id="subf_no" value="no" onclick="bar();"><label for="subf_no">No</label> 
<div id="submitBox"><input type="submit" value="Submit">
</form>
</body>

document.forms["subscribe"]["sub_type"]为您提供元素的集合，而不仅仅是选定的元素。似乎Chrome允许您在此集合上调用.value并获取所选值，但某些浏览器没有（我没有Safari，但IE也失败了）。无论如何，调用.value集合并不是正确的方法。

您可以通过调用以下内容来查看此操作：

document.forms["subscribe"]["sub_type"]

和

document.forms["subscribe"]["sub_type"].value

从浏览器开发工具控制台中。

您需要使用这些答案中的策略来正确获取检查值。如果你没有使用jQuery，那么你要么必须通过遍历整个组来找到选中的浏览器，要么如果你不关心旧浏览器，则使用querySelector。

$("[name=sub_type]:checked").val()
// or
document.querySelector("[name=sub_type]:checked").value
// or
var theValue;
var elems = document.getElementsByName("sub_type");
for (var i = 0; i < elems.length; ++i) {
    if (elems[i].checked) {
        theValue = elems[i].value;
        break;
    }
}

问题是你没有将"this"传递给函数。尝试打印出subTypeVal的值以了解我的意思 - 您会注意到，在Safari中，这将返回HTML元素列表，而在Chrome中，它（正确或错误）推断您想要单击的元素。

要解决此问题，请像这样将"this"传递到您的函数中： 

<input type="radio" name="sub_type" value="renewal" id="subf_renewal" onclick="foo(this);"><label for="subf_renewal">Renewal</label>

在你的JavaScript中，在你的"foo"函数中添加一个参数：

function foo(myButton)

和使用 

var subTypeVal = myButton.value;

相反。

在这里看jsFiddle：http://jsfiddle.net/fprfk146/2/

相关文章：