Question

我正在使用jQuery从XML文件中获取结果并在div中显示每个条目。这是有效的，但现在我想这样做，如果我点击div，它会在灯箱中显示来自xml的更多数据。

我创建了一个jsfiddle here，但它无效：

这是我的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);
    });

};

Answer 1

不确定，但这可能会有所帮助：

由于您的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

制作这样的功能。

Answer 2

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

在预先添加/追加

之前，将您的项目更多地包装在一个容器中

jQuery从XML获取数据并将其转换为lightbox

2 个答案: