0

私はjQueryを使用して、XMLファイルから結果を取得し、各エントリをdivに表示しています。これは機能していますが、divをクリックすると、ライトボックスにxmlからのより多くのデータが表示されるようにしたいと思います。

ここでjsfiddleを作成しましたが、機能していません。

これは私のhtmlです：

<section id="page3">
    <section class="portfolio row">
        <! Hier komen cases uit xml !>
                <div id="clearfix"></div>
            </section>
            <section class="portfolio_detail">
               <span class="prev">&lt;</span>
               <section class="ajax_image"></section>
               <span class="next">&gt;</span>
               <span class="close">X</span>
               <section class="watermark">
               <p>Thomas More &copy; Insilencio<br>
               Corporate identity maximum two lines</p>
               </section>
            </section>
        </section>

これが私のjQueryです。

    $.ajax({
    type: 'GET',
    url: "hellojames.commefort.com/onepager/data.xml",
    dataType: "xml",
    success: function (data) {
        //console.log(data);
        $(data).find("case").each(function () {
            var dezeCase = $(this);
            var id = dezeCase.find("id").text();
            var titel = dezeCase.find("titel").text();
            var thumb = dezeCase.find("thumb").text();
            var full = dezeCase.find("full");
            var images = full.find('img');
            var imagesArray = images;
            var html = '<div class="portfolio_item col" id="' + titel + '"><img src="' + thumb + '" alt="' + titel + '"><p class="caption">' + titel + '</p></div>';

            $('.portfolio').prepend(html);
            mouseHover();
            caseClick(imagesArray);
        });
    }
});

function mouseHover() {
    $('.portfolio_item').mouseover(function () {
        $(this).children('img').addClass("hover");
        $(this).children('.caption').show();
        //console.log('hover');
    }).mouseout(function () {
        $(this).children('img').removeClass("hover");
        //console.log('stophover');
        $('.caption').hide();
    });
};

function caseClick(afbeeldingen) {
    /* Detailpagina */
    $('.portfolio_item').on('click', function () {
        var lightbox = $('.portfolio_detail');
        $(".ajax_image").empty();
        lightbox.show().children().hide();
        lightbox.animate({
            width: '100%',
            height: "100%"
        }, 'fast');
        lightbox.children().fadeIn('slow');
        var inhoud = "<img src='" + afbeeldingen + "'>";
        $(".ajax_image").append(inhoud);
    });

};
4

2 に答える 2

0

確かではありませんが、これが役立つかもしれません：

div.portfolio_itemは動的に生成されるため、ページ上のすべての要素の親である必要がありますdelegate the event to the existing closest parent elem。simply delegate to the document itself

function caseClick(afbeeldingen) {
  $(document).on('click', '.portfolio_item', function () {
      var lightbox = $('.portfolio_detail');
      $(".ajax_image").empty();
      lightbox.show().children().hide();
      lightbox.animate({
        width: '100%',
        height: "100%"
      }, 'fast');
      lightbox.children().fadeIn('slow');
      var inhoud = "<img src='" + afbeeldingen + "'>";
      $(".ajax_image").append(inhoud);
  });
} //<-----------';' not required same applies to function mouseover(){}

あなたは;いつ使うべきですか

var caseClick = function(afbeeldingen){
    // all your code stuff
}; // <----------------------here `;` needed

このような機能を作っています。

于 2013-02-07T08:43:26.817 に答える
0 
var $body=$(document.body); 
$body.on({

  'mouseover':function(e) {
    //..
      }
  ,'mouseout':function(e) {//...
   }

  ,'click', function () {
    var lightbox = $('.portfolio_detail');
    $(".ajax_image").empty();
    lightbox.show().children().hide();
    lightbox.animate({
        width: '100%',
        height: "100%"
    }, 'fast');
    lightbox.children().fadeIn('slow');
    var inhoud = "<img src='" + $(this).data("imgsrc") + "'>";
    $(".ajax_image").append(inhoud);
}
, '.portfolio_item');


 $.ajax({
type: 'GET',
url: "hellojames.commefort.com/onepager/data.xml",
dataType: "xml",
success: function (data) {
    var html='';
     //console.log(data);
    $(data).find("case").each(function () {
        var dezeCase = $(this);
        var id = dezeCase.find("id").text();
        var titel = dezeCase.find("titel").text();
        var thumb = dezeCase.find("thumb").text();
        var full = dezeCase.find("full");


        html += '<div class="portfolio_item col" data-imgsrc="'+full.find('img')+'" id="' + titel + '"><img src="' + thumb + '" alt="' + titel + '"><p class="caption">' + titel + '</p></div>';



    });
    $(html).prependTo($('.portfolio'));
}
});

それを最適化するには、追加/追加する前にアイテムを1つのコンテナにもう少しラップします

于 2013-02-07T08:48:56.200 に答える