Question

我正在制作一个灯箱，当点击lightboxtrigger类的图像时，它将显示更大的尺寸。

这就是我在做的事情：当点击带有lightboxtrigger类的图像时，我将url存储到一个没有所有无效字符的数组中，然后我替换我将灯箱模态的src切换为数组。

我似乎无法让这个工作，任何想法为什么我使用的小脚本没有正确替换字符串？

这是我的代码：

＆＃13;

<script>

$('.triggerlightbox').click(function(){
var e=$(this);
var bg = e.css("background-image");
bg = bg.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '');
$('.photogallery__viewer__image').html('<img src="' + bg + '" />');
});

</script>

＆＃13;

.photogallery__maincontainer{  width:1300px; height:580px; ; flex:0 0 auto; display:flex; flex-flow:row; flex-wrap:wrap; justify-content:flex-start;}

.photogallery__viewer{ width:55%; height:100%; position:relative; display:flex; }

.photogallery__viewer__image{max-width:80%; height:auto; margin:auto; overflow:hidden; box-shadow:0 0 25px #111;}

.photogallery{
	
	width:42%; 
	height:93%; 
	position:relative; 
	display:flex; 
	flex-wrap:wrap; 
	justify-content:flex-start; 
	align-content:flex-start; 
	overflow:auto;
	
}


.photogallery__image{
	background-image: url('images/20170819_194526.jpg'); 
	background-position: center;  
	background-repeat: no-repeat; 
	background-size:contain; 
	max-height:20%;  
	min-height:20%; 
	flex:0 0 calc(25% - 15px);  
	margin-right:15px; 
	margin-bottom:35px; 
	cursor:pointer;
}

.photogallery__image:hover{
	opacity:0.8;
}

.close{width:3%; cursor:pointer; color:rgba(255, 255, 255, 0.7); font-family: 'Nunito', sans-serif; flex:0 0 3%; text-align:center; display:table;  font-size:25px; font-weight:600; }

.close:hover{color:rgba(255, 255, 255, 0.5);}

＆＃13;

<div class="photogallery__maincontainer" style="">
  <span style="display:none; cursor:pointer; color:rgba(255, 255, 255, 0.5); font-family: 'Nunito', sans-serif; font-size:50px; font-weight:600; position:absolute; bottom:5px; right:320px;">&#129087;</span>
  
    <div class="photogallery__viewer" style="">
	  <img class="photogallery__viewer__image" src="images/IMG-20170610-WA0025.jpg" style="">
	</div>
	<div class="photogallery" style="">
	  <div id="last" class="photogallery__image" style="background-image: url('images/');"></div>
  </div>
  <span class="close" style="">X</span>
  
  </div>

＆＃13;

Answer 1

正则表达式可能有问题。

这应该起作用：

bg = bg.split("'")[1];

无法获得div的background-image网址并替换为jquery

1 个答案: