JQuery: отображение информации об уникальном элементе, содержащемся в списке

Question

Я только начинаю использовать jQuery, и у меня возникают проблемы с тем, что я могу легко сделать на других языках.

У меня есть список элементов, и каждый элемент содержит список информации.Моя проблема связана с тем, что я не могу использовать jQuery для slideDown или slideUp информации об этих элементах, потому что не могу получить уникальный идентификатор для каждого из них.

$(function()
{
    classe = "#afficheDetails" + 0;
    $(classe).click(function()
    {
        affiche = "#detailsFeuille" + 0;
        if($(affiche).css("display") == "block")
        {
            $(affiche).slideUp();
        }
        else 
        {
            $(affiche).slideDown();
        }
    });
});

update:

Кроме того, я нахожусь в цикле for, поэтому у меня не всегда одинаковое количество элементов для отображения ...

<p id='afficheDetails<?php echo $i;?>'>to display info, click here</p>

            <table id='detailsFeuille<?php echo $i;?>'>
                <tr>
                    ...
                </tr>

                <tr>
                    ...
                </tr>
</table>

Такие вещи действительно работают, но, как вы можете видеть, яне добавлять индекс динамически, это все вручную.И мой список элементов может содержать много элементов.

Я пытался создать неанонимную функцию, но каждый раз, когда я вызываю ее, я получаю сообщение об ошибке: myFunction не определена.

Не могли бы вы помочь мне?

Спасибо!

Answer 1

По индексу

// Select all elements that start with "afficheDetails"
$("[id^='afficheDetails']").click(function(){
    var index = $("[class^='afficheDetails'").index(this); // Index of the element
    $("[id^='detailsFeuille']").eq(index).slideToggle();
});

Проверьте это демо: http://jsfiddle.net/fRyjV/1/

По ID

$("[id^='afficheDetails']").click(function(){
    // Replace the first part of the ID with nothing to get the integer.
    var id = this.id.replace("afficheDetails", "");
    $("#detailsFeuille" + id).slideToggle();
});

Проверьте это демо http://jsfiddle.net/fRyjV/