Question

我在更改jquery中的src属性时遇到问题。

这是一些拇指：

<a href='Imagini/someimage.jpg' class='popup' data-id='n' >
   <img src='Imagini-min/someimage.jpg' />
</a>

这里是弹出图像的容器：

<div class="gallery" align="center">
    <p id="close"><img src="Resurse/close.png" /></p>
    <p id="prev"><img src="Resurse/left.png" /></p>
        <img id="change" src="" data-id=""/>
    <p id="next"><img src="Resurse/right.png" /></p>
</div>

和jquery代码：

$(".popup").click(function(e){
    e.preventDefault();

    var img = $(this).attr("href");
    var id = $(this).attr("data-id");

    $(".gallery").show();
    if(id != $(".gallery").find("#change").attr("data-id")){
        $(".gallery").find("#change").attr("src", img).hide().fadeIn(100);
        $(".gallery").find("#change").attr("data-id", id);

        SetPosition();
    }
   });

function SetPosition(){
    var width = $(".gallery").find("#change").width();
    var height = $(".gallery").find("#change").height();
    var button_h = $(".gallery #prev img").height();

    $(".gallery #prev").css("top",(height/2 - button_h + 10 ));
    $(".gallery #next").css("top",(height/2 - button_h + 8 ));

    $(".gallery").css("width",(width+50));
    $(".gallery").css("height",(height+10));
}

问题是，当我打开浏览器并单击任何图像时，我得到： http://oi60.tinypic.com/2mq5gmg.jpg

如果按一下，正常： http://oi59.tinypic.com/qpqdk8.jpg

有人有这样的问题吗？

Answer 1

看看这个：

change src

HTML

<a href='javascript:void(0)' src='Imagini/someimage.jpg' class='imagePopup' data-id='n' >
   <img src='Imagini-min/someimage.jpg' />
</a>
<div class="gallery" align="center">
    <p id="close"><img src="Resurse/close.png" /></p>
    <p id="prev"><img src="Resurse/left.png" /></p>
        <img id="change" src="" data-id=""/>
    <p id="next"><img src="Resurse/right.png" /></p>
</div>

Jquery的

$("a.imagePopup").click(function(e){
    //The event.preventDefault() method stops the default action of an element from happening. but it does not work in all browser.

    e.preventDefault();

    var img = $(this).attr("src");
    var id = $(this).attr("data-id");
    var galleryID=$(".gallery").find("#change").attr("data-id");
    var targetImg=$(".gallery").find("#change");
    $(".gallery").show();    
    if(id != targetImg.attr("data-id")){
        targetImg.attr("src", img).hide().fadeIn(100).attr("data-id", id);
        alert("src="+targetImg.attr("src")+", id="+targetImg.attr("data-id"));

        SetPosition();
    }
   });

function SetPosition(){
    var width = $(".gallery").find("#change").width();
    var height = $(".gallery").find("#change").height();
    var button_h = $(".gallery #prev img").height();

    $(".gallery #prev").css("top",(height/2 - button_h + 10 ));
    $(".gallery #next").css("top",(height/2 - button_h + 8 ));

    $(".gallery").css("width",(width+50));
    $(".gallery").css("height",(height+10));
}

更新

致电＆＃34; SetPosition＆＃34; img.load（）中的函数; Update

Answer 2

也许这种改变有帮助：

$(".gallery").find("#change").hide();
$(".gallery").find("#change").attr("src", img);
$(".gallery").find("#change").fadeIn(100);

jquery attr（src）第一次没有工作

2 个答案: