Question

我想通过jQuery从我点击的元素中获取背景图片网址。问题是div是编号的，因为我需要一种方法来获得许多不同的图像。这就是它们的编号：

<div id="photoBackground photo1"></div>
<div id="photoBackground photo2"></div>
<div id="photoBackground photo3"></div>
<div id="photoBackground photo4"></div>
etc etc

我现在就是jQuery：

$(document).ready(function() {
$('.photoBackground').click(function () {
    var image = $(this).css('background-image');
    // remove "url(" and ")" to get the url
    image = image.replace('url(','').replace(')','');
    $("#lightbox").css('background-image','url(' + image + ')');
})
});

如何从编号的ID中读取？例如。 photo1，photo2等？

谢谢！

马格努斯

Answer 1

元素ID中不能包含空格。

由于你的jQuery选择器已经在寻找一个类photoBackground，所以将html更改为以下结构：

<div id="photo4" class="photoBackground"></div>

然后在点击处理程序this.id中将是被点击的元素的ID

$('.photoBackground').click(function () {
     var id = this.id;
     // do something with id and background


});

ID必须是唯一的，但类用于对具有公共类名的公共元素进行分组

Answer 2

在CSS中，ID应该是唯一的。使.photobackground成为一个类，然后将photo1，photo2等作为id。然后执行点击功能

$('.photoBackground').on('click',function () {
var idIClickedOn = '#' + $(this).attr('id'); //this will give you the actual id of the element
var image = $(idIClickedOn ).css('background-image');
// remove "url(" and ")" to get the url
image = image.replace('url(','').replace(')','');
$("#lightbox").css('background-image','url(' + image + ')');
})

从编号元素获取背景图像URL

2 个答案: