JavaScript中的条件语句

Question

我是一个有用的助手，可以为您翻译文本。

我有一个奇怪的问题：我的javascript条件不起作用 :/

这是我的代码:

var myposition = $("#audioWelcome").data("myposition");

/* condition */
if (myposition == "true") {
....
}

这是错误的吗？看看我的例子：http://jsfiddle.net/qqK5J/2/条件不起作用，而html（）或data（）也不起作用。

那么什么是不正确的呢？

- zelocalhost

---

你在选择器元素中是否添加了属性 data-myposition="true"？ - Girish

是的，我做到了，看看这个 fiddle。 - zelocalhost

жҲ–иҖ…дҪҝз”ЁDOMзҡ„getAttribute()иҖҢдёҚжҳҜjQueryзҡ„data()пјҢеҗҺиҖ…дёҚдјҡиҜ•еӣҫиҒӘжҳҺең°е°ҶжӮЁзҡ„еҖјиҪ¬жҚўдёәйқһеӯ—з¬ҰдёІгҖӮ - Phrogz

Answer 1

回答你的问题：

if (myposition == "true") {

由于myposition是布尔值true，而不是字符串值"true"，因此无法按预期工作。

你可能想知道为什么myposition是布尔值。这是因为jQuery将其转换为布尔值：

尝试将字符串转换为JavaScript值（包括布尔值、数字、对象、数组和null）。

所以，你只需要更改代码以设置布尔值而不是字符串，并相应调整条件即可：

if (myposition) {
    $(this).html("afficher le lecteur");
    $('#audioWelcome').data('myposition', false);
} else {
    $(this).html("cacher le lecteur");
    $('#audioWelcome').data('myposition', true);

}

或者更短：

$(this).html(myposition ? "afficher le lecteur" : "cacher le lecteur");
$('#audioWelcome').data('myposition', !myposition);

演示

- Felix Kling

---

这个（fiddle）为什么不能在移动设备上运行呢？我无法在我的平板电脑上使用Chrome使其工作。 - Nipuna

Answer 2

移除了双引号：

if (myposition == true) {

JSFiddle已更新，地址为：

http://jsfiddle.net/qqK5J/5/

更新：

    if (myposition == true) {

        $(this).html("afficher le lecteur");
        $('#audioWelcome').data('myposition', false);


    } else {

        $(this).html("cacher le lecteur");
        $('#audioWelcome').data('myposition', true);

    };

更新的代码片段链接：

http://jsfiddle.net/qqK5J/10/

- Kyo

---

这仅在第一次运行时有效，不是一个可工作的小实验。 - t0mppa

什么意思？它切换。 - Kyo

但是在您切换几次后，它会卡在“隐藏驱动器”上。 - t0mppa

这是因为 true != 'true'。为了使其正常工作，您还必须更改设置布尔值而不是字符串的值。 - Felix Kling

我明白了。我没有注意到字符串中的法语单词，对于讲英语的人来说，这些单词乍一看似乎是相同的 :) - Kyo

Answer 3

非常好的问题！

当作为属性设置时，javascript似乎会混淆“true”和“false”值，

@Kyo建议删除双引号，这在一定程度上可以解决问题。但是在点击3次后，代码停止按预期工作。

@user3391179的解决方案似乎根本不起作用...

对$("#audioWelcome").data("myposition")使用toString方法将使“true”/“false”（字符串）值按您所期望的方式工作。

代码：

    var myposition = $("#audioWelcome").data("myposition").toString();
    /* changements via onclick */
    if (myposition == "true") {
        $(this).html("afficher le lecteur");
        $('#audioWelcome').data('myposition', false);
    } else if (myposition == "false") {
        $(this).html("cacher le lecteur");
        $('#audioWelcome').data('myposition', true);
    };

演示：http://jsfiddle.net/qqK5J/8/

- extramaster

Answer 4

最好不要使用“== true”。这样人们就不会认为你是VB5开发者了。

if (myposition){}

- shredmill

---

但是，即使在设置了$（'#audioWelcome').data('myposition'，'false')之后，条件始终是类真值的。 你有注意到它的值是 'true' （一个字符串），而不是 true （一个布尔值），对吗？ - Felix Kling

但是如果我的参数不仅限于true或false呢？我希望它像字符串一样，而不是布尔值。 - zelocalhost

我会避免使用"true"作为字符串值。在Javascript控制台键入以下代码：var x = "true"; console.log(x);你会得到true而不是"true"。它似乎自动为您强制类型转换，这就是你遇到问题的原因。此外，将"true"用作字符串违反了我认为的最佳实践。 - shredmill

这只是Chrome决定打印字符串的方式。尝试在Firefox中使用它，或者尝试 var x =“foo”; console.log（x）;（它会打印foo，不带引号）。JavaScript不会将字符串“true”强制转换为布尔值true。 - Felix Kling