0

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

4

2 回答 2

1

您应该为 div 提供其 ID 的函数正在为它们提供一个类。你应该把它改成这样：

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

那应该可以，但是其余的代码可以使用 tidyup 来完成，因为有更好/更语义化的方式来做你想做的事情（我不忙的时候可能会这样做）。

编辑：

这样的事情会更好（基于 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。

于 2012-04-11T09:31:44.373 回答
0

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

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

进入

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

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

于 2012-04-11T13:07:44.033 回答