Question

请原谅模糊的问题标题。不完全确定如何说出这个。

基本上我的问题源于一些jquery，其中当在html中设置数据attr时，img标签显示了一些奇怪的行为，如下所示。

<img src="images/gallery/
                <img src="/images/gallery/bob.png" class="thumbnail&quot; data="1">
" class="popupImage">

从我所看到的是班级＆＃34; popupImage＆＃34;并没有取代班级＆＃34; thumbnail＆＃34;但是嵌套在外部img标签中的img标签应该是一个单独的实体，我的头脑很困惑，已经在这里待了好几个小时，可能只需要一双新的眼睛来看它。

非常感谢任何帮助

这是图库的完整html代码和jQuery代码。

如果我能提供更多需要它的信息，请询问，我会尝试在可能的情况下提供更多信息。

HTML

<?php 
    $data = $db->query("SELECT * FROM `gallery_items` ORDER BY id ASC");

//display query results

    ?>  
    <br /><br />

    <?php

    foreach($data as $item)
    {
        echo "<a data='".$item['id']."' class='noStyle'>
                <img src='/images/gallery/".$item['image']."' class='thumbnail' data='".$item['id']."'>
            </a>";
    }

    if(count($data) < 1){
        echo "<p style='text-align: center;'><br /><br />No results found</p>";
    }

?>

<div class="image">
    <button class="prev" data="unset">&lt;</button>
        <img src='' class="popupImage">
    <button class="next" data="unset">&gt;</button>
</div>

的jQuery

$(".noStyle").click(function(){
    loadPopup($(this).attr("data"));
});     

offFocus();

function loadPopup(id){
    imgSrc = "/images/gallery/"+$("a[data='"+id+"']").html();

    $("div.background").fadeIn(400, function(){
        $(".popupImage").attr("src", imgSrc);
        $(".image").fadeIn(500);
        reFocus();
        setPrevNext($("button[data='"+id+"']"));
    });

    $(window).resize(function(){
        reFocus();
    });

    function reFocus(){
        $(".image").css({"left": (($(window).width()/2) - ($(".image").width()/2))+"px", "top": (($(window).height()/2) - ($(".image").height()/2))+"px"});
    };
}/*close loadPopup */

function setPrevNext(buttonObj){
    objects = $(".button");
    firstObj = $(".button:first");
    lastObj = $(".button:last");

    prev = undefined;
    next = undefined;

    if(buttonObj.attr("data") == firstObj.attr("data"))
        prev = lastObj;
    else
        prev = objects.eq(objects.index(buttonObj)-1);


    if(buttonObj.attr("data") == lastObj.attr("data"))
        next = firstObj;
    else
        next = objects.eq(objects.index(buttonObj)+1);

    $(".prev").attr("data", prev.attr("data"));
    $(".next").attr("data", next.attr("data"));

    //next = buttonObj.next("button").attr("data");
    //$(".next").attr("data", "next");
}

function offFocus() {
        $(".background").click(function(){
            $(".background").css({"display": "none"});
            $(".image").css({"display": "none"});
    });
};

将img标记添加到已打开的img标记上

0 个答案: