JQuery: img.src change

JQuery: img.src change

本文关键字：change src img JQuery      更新时间：2023-09-26

我正在尝试构建这个简单的图库，似乎Chrome的安全性不支持内联jquery（它适用于IE）。（当我点击 .mini 类图像时，我希望 .show 类图像复制它的 src）。所以我需要写一个.js文件。我只是无法让它工作。请提供一些建议？我为我的英语不好道歉。

.HTML： 

<div class="galerie" align="center">
        <div class="mini">
            <img onClick="show1.src=imag01.src" id="imag01" src="img/pers/img1.jpg" alt="NO IMAGE"/>
            <img onClick="show1.src=imag02.src" id="imag02" src="img/pers/img2.jpg" alt="NO IMAGE"/>
            <img onClick="show1.src=imag03.src" id="imag03" src="img/pers/img3.jpg" alt="NO IMAGE"/>
            <img onClick="show1.src=imag04.src" id="imag04" src="img/pers/img4.jpg" alt="NO IMAGE"/>
            <img onClick="show1.src=imag05.src" id="imag05" src="img/pers/img5.jpg" alt="NO IMAGE"/>
            <img onClick="show1.src=imag06.src" id="imag06" src="img/pers/img6.jpg" alt="NO IMAGE"/>
            <img onClick="show1.src=imag07.src" id="imag07" src="img/pers/img7.jpg" alt="NO IMAGE"/>
            <img onClick="show1.src=imag08.src" id="imag08" src="img/pers/img8.jpg" alt="NO IMAGE"/>
            <img onClick="show1.src=imag09.src" id="imag09" src="img/pers/img9.jpg" alt="NO IMAGE"/>
        </div>  
        <div class="show" align="center">
           <img id="show1" src="img/img1.jpg" alt="NO IMAGE"/>
        </div>
</div>

.CSS：

<style type="text/css">
            .mini img {
                height: 80px;
                border: 4px solid #C3C3C3;
                padding: 1px;
                margin: 0 10px 10px 0;
            }
            .mini img:hover {
                border: 4px solid #B08FAB;
                cursor:pointer;
            }
            .show img {
                border: 4px solid #C3C3C3;
                padding: 1px;
                height: 400px;
            }
            div.galerie{
                box-shadow: 0px 3px 10px #243139;
                z-index: 5;
            }
</style>

JQuery（不工作）：

$(".mini img").click(function(){
            var imgsrc = jQuery(this).attr("src");
            $("#show1").attr("src", imgsrc);
});

jQuery("#show1 img").attr("src") = imgsrc;

^^ 不是jQuery的工作方式。完全。

jQuery("#show1 img").attr("src", imgsrc);

^^ 是jQuery的工作方式。

jQuery .attr()文档。

编辑：你的选择器也是错误的。 #show1是一个图像。所以你应该做：

jQuery("#show1").attr("src", imgsrc);

编辑2： ...你得到的是imgsrc的第一张图片的src，而不是被点击的那张。使用this ：

var imgsrc = jQuery(this).attr("src");

甚至

var imgsrc = this.src;
相关文章：