Question

我用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。

Answer 1

你应该为div提供ID的函数给他们一个类。你应该把它改成这样的东西：

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

应该工作，但其余的代码可以做一个整理，因为有更好/更多的语义方式来做你想做的事情（当我不是时，我可能会这样做）忙）。

修改

这样的事情会更好（根据Armatus的评论）：

// give each div a data-index attribute $("div.item").each(function(i){ $(this).attr("data-index", i); }); // give each anchor a data-index attribute $("#video_grid .grid_item a").each(function(i) { $(this).attr("data-index", i); }); $(".grid_item a").live("click",function () { var index = $(this).attr("data-index"); $('div.item[data-index="' + index + '"]').show(); });

.live()已被弃用，但我会离开它，因为我不知道你正在使用哪个版本的jQuery。

Answer 2

虽然基督徒向你展示的路线可能从长远来看更好，更有学习，但你可以通过更改两行来轻松解决原始问题：

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

到

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

当前的问题是你给你的div一个包含'＃'符号的类名。这将成为您班级名称的一部分。但是，在选择过程中，此“＃”符号将被解释为“ID”选择器。所以这不起作用。

Javascript - Jquery在飞行id检索

2 个答案: