2

使用 JS/jQuery，最好的方法是什么？

我有 5 个变量：

var fruit1 = "apple";
var fruit2 = "mango";
var fruit3 = "orange";
var fruit4 = "banana";
var fruit5 = "melon";

然后我有一个带有某种水果的列表元素被点击：

<li id="banana">Banana</li>

我在脚本中得到了它的 ID：

$("li").on("click", function() {
    var selectedfruit = $(this).attr("id");
});

如何selectedfruit与变量列表匹配，以便它返回fruit4我可以使用的东西？

第二个问题，我应该把我的变量列表放在一个数组中吗？

非常感谢。

编辑：我很抱歉，但我犯了一个巨大的错误

我需要selectedfruit使用变量名而不是变量内容来验证。

因此，标记将是这样的：

<li id="fruit4">Mystery fruit</li>

4

7 回答 7

8

是的，这绝对是数组的工作。

var fruits = ["apple", "mango", "orange", "banana", "melon"];

然后在您的点击处理程序中，您可以搜索此数组并获取其索引。

$("li").on("click", function() {
    // Note: This will return -1, if it's not in the array
    var selectedfruit = $.inArray($(this).attr("id"), fruits); // 3 (arrays are zero-indexed)
});

更新根据您的更新，我会改用一个对象。

var fruits = {
    fruit1: "apple",
    fruit2: "mango",
    fruit3: "orange",
    fruit4: "banana",
    fruit5: "melon"
};

然后您可以使用ID来获取值并进行比较。

$("li").on("click", function() {
    var selectedfruit = fruits[$(this).attr("id")];  // banana
});
于 2012-08-16T17:14:09.200 回答
3

您可以尝试以下方法：

var fruits = {
  fruit1 : "apple",
  fruit2 : "mango",
  fruit3 : "orange",
  fruit4 : "banana",
  fruit5 : "melon"
};

$("li").on("click", function() {
    var selectedfruit = $(this).attr("id");
    alert( fruits[selectedfruit] );
});

但是用数组

var fruits = ["apple", "mango", "orange", "banana", "melon"],
    selectedfruit  = $(this).attr("id");

$("li").on("click", function() {
    var index = $.inArray( fruits, selectedfruit  );
    if( index >= 0 ) // checking that fruit exists in the array, if not index === -1
       var fruitIndex = 'fruit' + (index + 1);
});
于 2012-08-16T17:13:35.893 回答
3

您可以使用 javascript 数组而不是单个变量吗？

var fruits=new Array("apple","mango","orange", "banana", "melon");
$.inArray("mango", fruits)

看到这个JsFiddle

于 2012-08-16T17:16:19.043 回答
2

尝试将变量设为数组：

var fruits = ["apple", "mango", "orange", "banana", "melon"];

然后使用以下命令获取数组的索引indexOf()：

$("li").on("click", function() {
    var fruitIndex = fruits.indexOf($(this).attr("id"));
});

由于某些浏览器不支持indexOf()，您可以使用以下命令强制其支持：

if (!Array.prototype.indexOf) { 
    Array.prototype.indexOf = function(obj, start) {
         for (var i = (start || 0), j = this.length; i < j; i++) {
             if (this[i] === obj) { return i; }
         }
         return -1;
    }
}

然后，您可以像这样与单击的水果元素进行交互：

alert(fruits[fruitIndex]);
于 2012-08-16T17:13:48.903 回答
2

如果将变量存储在数组中会更好。然后您可以使用 轻松找到匹配项jQuery.inArray。

于 2012-08-16T17:14:15.630 回答
2

是的，你应该把你的变量放在一个数组中。在 jquery 中编码已经有一段时间了，但我想我可以试一试：

     var fruits[] = new Array(your variable values)
     $(document).ready(function() {
          //click handler event and then take the value of id attribute as you mentioned
          //iterate over the loop and then store index and do something with that if you 
          //want. 
     });
于 2012-08-16T17:17:44.753 回答
1

我以为他需要一些语法帮助；现在更新了。更好的答案已经存在：

var fruits = ["apple", "mango", "orange", "banana", "melon"];
$("li").click(function() {
    var selectedfruit = $(this).attr("id");
    for (i = 0; i < fruits.length; i++) {
        if (selectedfruit == "fruit" + (i+1)) {
            alert(fruits[i] + " is pressed");
        }
        }
    });​
于 2012-08-16T17:22:45.133 回答