0

div調整された要素とリンクにID を与える jQuery を使用して JS ユーティリティを作成しました。

例：

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

それはうまくいくはずですが、やりたいことを行うためのより良い/よりセマンティックな方法があるため、コードの残りの部分は片付けで行うことができます（忙しくないときに行うかもしれません）。

編集：

このようなものが良いでしょう (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 が示したルートは、長期的にはおそらくより優れたものであり、確実により多くのことを学べますが、元の問題は次の 2 つの行を変更することで簡単に解決できます。

    $(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 に答える