jQuery: получить контент / innerhtml onclick

Question

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

Что я получил до сих пор: http://jsfiddle.net/8mYW9/

Во-первых, я знаю, что "appear" <div> является избыточным - есть ли хороший способвместо этого используйте $(this) и appendTo();?

В конечном счете, моя идея заключается в том, чтобы получить идентификатор привязки, содержащейся в элементе div, по которому щелкают, и добавить его в ячейку.Что мне делать ...?

Answer 1

Если вы измените атрибут ID на класс для элементов appear, вы можете сделать это:

$(document).ready(function() {
    $('#appear').hide();
    $('.links').click(function() {
        var $this = $(this);//cache the $(this) selector since it will be used more than once
        $this.children('.appear').html('item id: ' + $this.children('a').attr('id')).fadeToggle('slow');
    });
});

Демонстрация: http://jsfiddle.net/8mYW9/7/

Кстати, вы не можете иметь несколько элементовс тем же идентификатором в документе HTML.

Answer 2

Вы можете сделать это с помощью:

$(document).ready(function() {
    $('#appear').hide();
    $('.links').click(function() {
        $(this).append('<div>' + $(this).find('a:first').attr('id') + '</div>');
    });
});

Демонстрация JS Fiddle .

Изменено, так что отображается только one id(другие удаляются, прежде чем показывать последние):

$(document).ready(function() {
    $('#appear').hide();
    $('.links').click(function() {
        $(this).closest('.container').find('.appended').remove();
        $(this).append('<div class="appended">' + $(this).find('a:first').attr('id') + '</div>');
    });
});

Демонстрация JS Fiddle .

Кстати, это ускользнуло от моего уведомления в первый раз, но с несколькими элементами обмена то же самое id у вас недействительный (X) HTML: id должен быть уникальным в документе (цитата: W3.org).

Ссылки:

• attr().
• closest().
• find().
• :first селектор .
• remove().

Answer 3

Попробуйте вместо этого использовать селекторы классов.У вас есть повторяющиеся идентификаторы:

$(document).ready(function() {
    $('.appear').hide();
    $('.links').click(function() {
        $(this).find(".appear").fadeToggle('slow', function() {
            $(this).html('item id:')
        });
    });
});

http://jsfiddle.net/8mYW9/