Question

请访问：www.designedbychristian.com/template_2

（到目前为止已经过镀铬测试）

当您点击设计时，会出现一堆缩略图。我试图使用.each选择器来获取图像的src。我想获取该值并将其应用于单击时显示的div。（我知道如何编程那部分）

我的问题是当我点击拇指指甲时，我的警报给了我所有缩略图的值。

我的代码是：

    function spawnImages() {
        N = 1
        for (i = 1; i <= 9; i++) {
            var gal = document.getElementById('gallary')

            var newDIV = '<img onclick="imageView()" src="images2/image' + N + '.jpg" class="thumb-nail imageNumber' + N + '"/>'

            $('.gallary').prepend(newDIV)
            var min = 3;
            var max = 70;
            var s = Math.floor(Math.random() * (max - min + 1)) + min;
            var test = $(('.imageNumber' +N)).css("left", s + "%")
            var min = 3;
            var max = $(this).height();
            var max = 70;
            var s = Math.floor(Math.random() * (max - min + 1)) + min;

            var test = $(('.imageNumber' + N)).css("top", s + "%")


            var min = -45;
            var max = 45;
            var s = Math.floor(Math.random() * (max - min + 1)) + min;

            var test = $(('.imageNumber' + N)).css("-webkit-transform", "rotate(" + s + "deg)")
            var test = $(('.imageNumber' + N)).css("transform", "rotate(" + s + "deg)")
            var test = $(('.imageNumber' + N)).css("-ms-transform", "rotate(" + s + "deg)")


            N++

        }
    }

    function imageView() {
        $(".thumb-nail").each(function () {
            var imageSrc = $(this).attr('src');
            alert($(this).attr('src'));
            //$('.images').css("background-image", "url("+imageSrc+")");
            //$('.images').css("background-size", "cover");
            //$('.blackForeground').css("visibility", "visible");
            //$('.images').css("visibility", "visible"); 
        })

    };

Answer 1

只需使用jquery事件处理程序，摆脱html中的onclick调用，然后将其添加到您的javascript中。

$(".thumb-nail").on('click', function(){
            var imageSrc = $(this).attr('src');
            alert($(this).attr('src'));
            //$('.images').css("background-image", "url("+imageSrc+")");
            //$('.images').css("background-size", "cover");
            //$('.blackForeground').css("visibility", "visible");
            //$('.images').css("visibility", "visible"); 
});

编辑：没有考虑动态创建的图片，Popnoodles的答案是正确的

Answer 2

传递点击的元素引用，如下所示：

var newDIV = '<img onclick="imageView(this)" src="images2/image' + N + '.jpg" class="thumb-nail imageNumber' + N + '"/>'

功能：

function imageView(element) {

            var imageSrc = $(element).attr('src');
            alert($(element).attr('src'));

        }

Answer 3

这正是jQuery API describes the .each() method：

的方式

迭代jQuery对象，为每个匹配的元素执行一个函数。

当您调用$('.thumb-nail')时，它返回了jQuery对象中具有类thumb-nail的所有元素。然后，当您在该对象上调用.each( function() {} )时，循环遍历所有返回的元素。

在jQuery中处理点击事件的最简单方法是使用the .on() method，正如其他人在答案中指出的那样。

另外，正如@Popnoodles所提到的，由于这些元素是动态创建的，因此您可能需要在创建这些元素后显式运行$().on()调用。出于这个原因，您可以将其包装到spawnImages()函数中，而不是将其放在$()中，因为@Popnoodles指示（即不是$( $(element).on('click',function(){})，因为$( )等同于{ {1}}。

Answer 4

最简单的改变就是这个

// send this element to the function
var newDIV = '<img onclick="imageView(this)" src="images2/image' + N + '.jpg" class="thumb-nail imageNumber' + N + '"/>'

function imageView(el) {
        var imageSrc = $(el).attr('src');
        alert($(el).attr('src'));
};

但以更标准的方式做事情真好......

首先摆脱这个onclick="imageView()"

var newDIV = '<img src="images2/image' + N + '.jpg" class="thumb-nail imageNumber' + N + '"/>'

由于这些元素是动态创建的，因此您需要将click事件绑定到文档或其他存在的祖先，并委托给每个“.thumb-nail”。

只有在dom准备好后才需要运行此过程（$(function(){...});）。

$(function(){

    $(document).on('click', ".thumb-nail", function () {
            var imageSrc = $(this).attr('src');
            alert($(this).attr('src'));
            //$('.images').css("background-image", "url("+imageSrc+")");
            //$('.images').css("background-size", "cover");
            //$('.blackForeground').css("visibility", "visible");
            //$('.images').css("visibility", "visible"); 
    });

});

Jquery .each（）给出了具有相同类的所有元素的值

4 个答案: