href的背景网址

时间:2018-07-30 01:33:12

标签: javascript jquery html

我正在尝试从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/

2 个答案:

答案 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 元素。