Question

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

Answer 1

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>

Answer 2

使用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 元素。

href的背景网址

2 个答案: