Question

使用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>

Answer 1

是的，这绝对是阵列的工作。

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
});

Answer 2

您可以尝试以下内容：

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);
});

Answer 3

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

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

请参阅此JsFiddle

Answer 4

尝试将变量设为数组：

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]);

Answer 5

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

Answer 6

是的，你应该把你的变量放在一个数组中。在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. 
     });

Answer 7

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

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");
        }
        }
    });

将字符串与存储的变量列表进行匹配

7 个答案:

但是有数组