Как использовать переменную для отображения определенного контента? - PullRequest
Новая
       25

Как использовать переменную для отображения определенного контента?

1 голос
/ 25 июля 2011

Когда я нажимаю на ссылку, я хочу отобразить изображение и описание из идентификатора цели. Может кто-нибудь исправить этот код для меня и показать мне, как это сделать правильно? Большое спасибо!

HTML: 

    <div id="gallery"><img/></div>
    <a href="#panorak">Click me</a>

JQuery код: 

var datas={
            "images":[{ "src":"gallery/panorak.jpg",
                        "title":"PANORAK",
                        "date":"28/10/2010 Web Design",
                        "description":"desc",
                        "id":"panorak",
                        }, 
                        {
                        "src":"gallery/kamoa.jpg",
                        "title":"kamoa",
                        "date":"28/10/2010 Web Design",
                        "description":"desc",
                        "id":"kamoa",
                        }, 
                    ]};
$(document).ready(function(){
    var gallery=$("#gallery")

    //****I don't know how to display it right at this point

    var list=$("<ul/>");
    gallery.append(list);
    datas.images.each(function(i,j){
        list.prepend($("<li/>").$("<img/>").attr("src",datas.images[i].src).load(function(){ }));
    });
});

Любая помощь очень ценится! Большое спасибо!

Ответы [ 2 ]

1 голос
/ 25 июля 2011

Я внес некоторые изменения в ваш код:

http://jsfiddle.net/T5r6D/

Посмотрите мою ссылку на jsfiddle для всех обновлений.У вас была некоторая структура в проблемах потока и ошибке JavaScript.

Я добавляю все изображения в массив, используя обычный цикл for.После завершения цикла я обертываю изображения с помощью <li> и добавляю список на сцену.

Имейте в виду, что изображения не будут отображаться, поскольку они не находятся на сервере jsfiddle.Попробуйте на своей стороне.

ОБНОВЛЕНИЕ

http://jsfiddle.net/T5r6D/1/

Таким образом, новое обновление не скрывает полный контейнер.

Якорь #tag [href] будет сопоставлен с тегом заголовка изображения.Поэтому после нажатия на кнопку будет скрыто соответствующее изображение.

1 голос
/ 25 июля 2011

Попробуйте это: 

$(document).ready(function(){
    var gallery=$("#gallery")

    //****I don't know how to display it right at this point    

    $('a').click(function(){
        var list=$("<ul/>");
        gallery.append(list);
        $.each(datas.images, function(i,j){
            var img = $("<img/>").attr("src",datas.images[i].src);
            list.prepend($("<li/>").append(img));
        });
    });
});

Если вы хотите запускать события, когда что-то нажимается, вы можете использовать функцию click(). И я исправил each() функциональную часть. Проверьте эту документацию . И я разделил некоторый код, чтобы улучшить читаемость.

...