javascript - 将 替换为父元素的 CSS 背景图片(使用 jQuery 将样式与内容分开)

Question

我有一个 div 类，.event，它应该有一个背景图像(该类的每个实例都有不同的图像)。但是，我不想每次添加此类的 div 时都编辑 CSS。我只想编辑 HTML，这也是 HTML5 的目标，将样式与内容分开。

HTML:

<div class="event" id="meeting1">
  <img src="img/DSC_0001.jpg">
  <span>Mon 19 Oct</span>
</div>
<div class="event" id="bookSale">
  <img src="img/DSC_0004.jpg">
  <span>Wed 21 Oct</span>
</div>
...

Answer 1

为什么不直接内联样式？

<div class="event" id="meeting1" style="background-image: url(img/DSC_0001.jpg)">
  <span>Mon 19 Oct</span>
</div>
<div class="event" id="bookSale" style="background-image: url(img/DSC_0004.jpg)">
  <span>Wed 21 Oct</span>
</div>

有些情况下内联样式不受欢迎，但在这种情况下，我认为它是合适的。