我可以使用连接的 var+array_value 作为 jquery 中的选择器，即 $("#var+array_value")

Posted 2023-02-22

【中文标题】我可以使用连接的 var+array_value 作为 jquery 中的选择器，即 $("#var+array_value")

【英文标题】：Can I use a concatenated var+array_value as a selector in jquery i.e $("#var+array_value")

【发布时间】：2012-07-08 05:52:45

【问题描述】：

这可能很明显，但老实说，我不是任何类型的开发人员。只是想为我工作的公司的客户提供一些东西的人。

我在 JS 中定义了一个数组，我希望能够使用 for 循环在数组中的每个项目上运行一段代码。

如果我单独运行代码（即不在循环中），我知道它可以工作。一旦尝试将其置于循环中，它就会失败。我希望这里有人能告诉我我做错了什么，为什么它是错的，以及我如何才能做对。 （在我看来，我希望能够了解我在做什么/为什么要做这些事情，因为了解这些事情总是更好）。

我得到的（有效的）JS/JQuery 代码是；

var a = document.getElementById('roomthumb_2236');
var d = $("#chosenrate_2236").offset();

if ($('#chosenrate_2236').length) 
    a.style.visibility='visible';

    $("#roomthumb_2236").css(
        top: d.top -9 + "px",
        left: d.left + 560 + "px",
    )
;

这很好用（我知道有一个 JS 和 JQuery 的混搭，我可以稍后对其进行标准化）。

我已经尝试了很多“for”循环的变体，但它似乎并不想工作。这是我的“for”代码的最新版本；

var rooms_array = [2236, 2235]

var reposition = function ()
    document.getElementById('hidden_stuff').style.display="none";

    for (var i = 0; i < rooms_array.length; i++) 
        var a = "roomthumb_"+rooms_array[i];
        var b = "chosenrate_"+rooms_array[i];
        var c = "chosenrate_"+rooms_array[i].offset()

        if ($(b).length) 
            $(a).css(
                visibility:"visible",
                top: c.top -9 + "px",
                left: c.left + 560 + "px",
            )
        ;
    ;
;

代码应该做什么（如果不清楚的话）是；

设置数组（这是从数据库中动态创建的 id 列表） 隐藏一个 div “hiddenstuff”（这很好用） 然后对于数组中的每个 id； 创建一个名为 a 的变量 'roomthumb_xxxx'（其中 xxxx 是数组中的 id） 创建一个名为 b 的变量 'chosenrate_xxxx'（其中 xxxx 是数组中的 id） 检查是否存在 ID 与变量 b 匹配的元素，如果存在则编辑 ID 为变量 a 的元素的 css 属性

var c 应该获取 var b 的位置（如果我是对的），以便我可以相对于它定位具有 var a 的 ID 的元素...

我不知道为什么代码在循环内失败。我似乎总是得到空错误，或者它认为 var b 未定义？

我的猜测是我不能获取一个字符串 (chosenrate_)，向其中添加一个数组字符串，然后将该结果用作 ID。如果我使用 alert(a) 或 alert(b) 我确实得到了我需要的 ID，但我不知道如何在 $("#ID") 中使用它...

我想我已经解释了一切。如果我遗漏了什么，我会尽力解释得更好。

【参考方案1】：

我认为与此代码类似的代码会为您完成这项工作：

// Your array with data.
var rooms_array = [2235, 2236, 2237, 2238];
var reposition = function ()
    // Hide whatever you need to hide.
    $('#hidden_stuff').attr('display', "none");
    // This is a jQuery function to iterate over arrays.
    $.each(rooms_array, function(key,value)
        // Create your "a" variable
        var a = '#roomthumb_'+value;  // roomthumb_2235  ; roomthumb_2236 ...
        var b = '#chosenrate_'+value; // chosenrate_2235 ; chosenrate_2236 ...

        // If b exists...
        if ($(b).length) 
            var c = $(b).offset(); // get the offset of "b"
            $(a).css(
                visibility:"visible",
                top: c.top -9 + "px",
                left: c.left + 560 + "px"
            )
        
        // if "b" doesn't exist
        else 
            // edit the css properties of the element with the ID of variable "a"
        
    );
;

【讨论】：

这段代码比我以前的代码效果更好（我在 Chrome 的“控制台”中收到了一个警告），现在它已经消失了。我认为它可能归结为仅在 b 存在时尝试设置 .offset ，这是我以前没有做过的。总的来说，我会说这是最完整、最成功的答案。我会投票，只是我还没有足够的代表......

我很高兴它对你有用。不要担心赞成票。干杯! :)

你能看看我的另一个问题here??使用某人建议的类的想法并不能解决问题......

【参考方案2】：

你可以试试

var a = "#roomthumb_"+rooms_array[i]; // put # sign for id selector
var b = "#chosenrate_"+rooms_array[i];
var c = $("#chosenrate_"+rooms_array[i]).offset();

你也可以把var c写成：

var c = $(b).offset(); // where var b = "#chosenrate_"+rooms_array[i];

而不是您当前正在尝试的。

当您尝试指向 id 时，您需要在开始时使用 #。

【讨论】：

完美运行。谢谢。还要感谢 greg 和 vins 的回答。首先尝试了这个，所以必须把它作为答案。

我确实有另一个问题，您可以帮忙解决。我还有另一段代码，我在单独的 for 循环中运行，但我认为我可以运行它在这个。我已经把它作为另一个问题问了here

【参考方案3】：

您在编写选择器时做错了事。 根据您的问题$(“#var+array_value”) 这应该是$(“#"+var+array_value)

【参考方案4】：

你是对的，你可以连接字符串来制作 jQuery 选择器。快速查看后，我可以看到问题可能是c 的值。此外，您缺少选择器开头的哈希值。替换这个：

var c = $("chosenrate_" + rooms_array[i]).offset()

与：

var a = "#roomthumb_" + rooms_array[i];
var b = "#chosenrate_" + rooms_array[i];
var c = $("#chosenrate_" + rooms_array[i]).offset()