我正在尝试从href获取网址并将其粘贴到背景图片中。 问题在于它仅适用于第一个div而不适用于所有div。如果不提供唯一的类,这是否可能?
HTML
<div id="main-bg"> text
<div id="inner-content"> <a href="smile0.png"></a> </div>
</div>
<div id="main-bg"> text
<div id="inner-content"> <a href="smile1.png"></a> </div>
</div>
<div id="main-bg"> text
<div id="inner-content"> <a href="smile2.png"></a> </div>
</div>
<div id="main-bg"> text
<div id="inner-content"> <a href="smile3.png"></a> </div>
</div>
JS
$('#main-bg').css(
'background-image', 'url(' + $('#inner-content a').attr('href') + ')'
);
JSFIDDLE: https://jsfiddle.net/pr07zymf/
答案 0 :(得分:2)
id
必须对于每个元素都是唯一的!在CSS中有时可以多次使用它,但是JavaScript并不是那么宽容。仅对第一个<div>
进行样式设置是因为JavaScript会忽略具有相同ID的所有其他元素。
您可以改为使用类,如下例所示!
示例代码:
/* Iterate over every element having the given class. */
$('.main-bg').each(function (index, element) {
/* Cache a jQuery instance of the element. */
var el = $(element);
/* Get the 'href' and assign it as the 'background-image' for each element. */
el.css('background-image', 'url(' + el.find('.inner-content a').attr('href') + ')');
});
.main-bg {color: #fff}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-bg"> text
<div class="inner-content">
<a href="//cdn.pixabay.com/photo/2012/03/01/00/21/bridge-19513_960_720.jpg"></a>
</div>
</div>
<div class="main-bg"> text
<div class="inner-content">
<a href="//cdn.pixabay.com/photo/2014/09/07/22/17/forest-438432_960_720.jpg"></a>
</div>
</div>
<div class="main-bg"> text
<div class="inner-content">
<a href="//cdn.pixabay.com/photo/2015/09/05/04/27/milky-way-923738_960_720.jpg"></a>
</div>
</div>
<div class="main-bg"> text
<div class="inner-content">
<a href="//cdn.pixabay.com/photo/2015/07/31/06/50/forest-868715_960_720.jpg"></a>
</div>
</div>
答案 1 :(得分:1)
使用HTML时,请记住,该ID应该始终为 UNIQUE 。 您不能使它们具有与“ main-bg”相同的名称。
解决方案:
1,将其ID的名称更改为<div id ="main-bg1">
,<div id ="main-bg2">
,<div id ="main-bg3">
和<div id ="main-bg4">
2,像
一样使用 CLASS<div class="main-bg"> text
<div class="inner-content"> <a href="smile3.png"></a> </div>
请记住,每次您这样做
$('#ID')
或
document.getElementById(ID)
它将始终选择具有此ID的 FIRST 元素。