Javascript-Jquery动态id检索

我用jQuery制作了一个JS实用程序，它为协调的

div

元素和链接提供ID

例如：

div id="container"
div id="1"
div id="2"

div id="links"
a name="1"
a name="2"

因此，一旦加载页面，当我单击第一个链接（name=“1”）时，它应该显示第一个div（id=“1”）

但是，由于我的ID是动态创建的，所以函数似乎找不到正确的div

以下是我的功能：

$("#video_grid .grid_item a").each(
        function(i) {

            /* FINDING 'A' AND GIVING THEM NAME */

            $(this).addClass("item" + (i + 1));
            $(this).attr("name", "#" + (i + 1));

            /* BACKGROUND */

            $(this).css("background-image",
                    "url(images/visu_" + (i + 1) + ".jpg");
            $(this).hover(
                    function() {
                        $(this).css("background-image",
                                "url(images/visu_hover_" + (i + 1) + ".jpg")
                    },
                    function() {
                        $(this).css("background-image",
                                "url(images/visu_" + (i + 1) + ".jpg");
                    });
        });

/* FINDING DIV GIVING THEM IDS */

$("#capsule_player > div").each(function(i) {
    $(this).addClass("item#" + (i + 1));
});

/* HERE'S THE PROBLEM */

$("#capsule_player div:first-child").css("display", "block");
/* appel la div correspondante avec la video */
$(".grid_item a").live("click", function() {
    var divname = $(this).attr("name");
    alert(divname);
    /* WORK FINE TIL HERE */

    /* THIS IS THE REAL PROBLEM */

    $(".item" + divname).show("slow").siblings().hide("slow");

    /* ALERT IF YOU FIND THE DIV WITH THE ID, DOES NOT WORK */

    if ($(".item" + divname)[0]) {
        alert('tonton');
    }

});

---

我使用的是jQuery、基本HTML和CSS，不允许使用PHP。

你应该给div的ID的函数是给他们一个类。您应该将其更改为以下内容：

$("#capsule_player > div").each(function(i){
    $(this).attr("id", 'item' + (i+1));
});

这应该行得通，但是代码的其余部分可以使用tidyup，因为有更好/更语义的方法来做您想做的事情（我可能在不忙的时候做）

编辑：

这样做会更好（根据阿玛图斯的评论）：

---

.live（）

已被弃用，但我将不使用它，因为我不知道您使用的是哪个版本的jQuery。

尽管Christian向您展示的路线从长远来看可能更好，而且肯定更具学习性，但您最初的问题可以通过更改两行代码轻松解决：

    $(this).attr('name', '#' + (i + 1));
    [...]
    $(this).addClass('item#' + (i + 1));

进入

---

直接的问题是，您给div一个包含“#”符号的类名。这将成为你的类名的一部分。但是，在选择过程中，此“#”符号将被解释为“ID”选择器。所以这是行不通的。

你似乎有一个真正神秘的ID、名称和类的混合体。试着对其进行排序：类将元素分组在一起，ID在页面上标识一个唯一的元素。名称是表单元素的名称。不要让它们以数字开头；对于编号，您可以使用自己的单独属性，如

data index=“number”

。一旦你有了它，你的代码就会更清晰，更容易调试。你所说的“ID”实际上是一个类，因此叫做“addClass”方法名。此外，我同意阿玛图斯的观点。最后，从你发布的代码中我看不出问题所在，你能试着拿出一个简单的HTML和JS示例来说明你的问题吗。因为OP实际上也在类级别上进行选择，所以在代码的其余部分，我认为这不会解决问题。他是通过类和

a

上的

name

属性来选择div的，因此如果

name

属性是一个id选择器（如代码开头所定义的），理论上，它应该可以工作。不过我还没有测试它。据我所知，他/她正在使用

a

（即“#1”）的

name

构造一个类选择器“.name#1”。等等，问题其实就在这里。#符号可以用在类的名称中，但作为选择器，它将充当ID选择器。不管怎样，您的编辑对于原始的底层问题来说是一个更好的解决方案！喔，谢谢你，我正在试你的答案。我把原始代码放在这里：好的，它可以工作。Chris我只是将div.item的最后一个调用添加到modifiy中，因为没有更多的div.item了。我把#capsule_player>div[data index=“”+divname+”]。谢谢！

    $(this).attr('name', '#' + (i + 1));
    [...]
    $(this).addClass('item#' + (i + 1));

    $(this).attr('name', 'Q' + (i + 1));
    [...]
    $(this).addClass('itemQ' + (i + 1));