jquery - 使用样式表中的匹配图像动态更改 jquery .css 图像

Question

我正在尝试将以下 jquery 代码的 css 图像动态更改为样式表中匹配的图像。

jQuery(document).ready(function($) {
$(".trigger-wrapper").click(function () {
    $("#menu-wrapper-left").stop().animate({width: 'toggle'});
    $('#hero-container').css('image1.jpg)');
    return false;
});
});

注意下面这一行。

$('#hero-container').css('image1.jpg)');

如何动态更改它以匹配样式表中的编号图像？

样式表中的图像是这样存储的。

.hero li:nth-child(1) span { 
  background-image: url('http://image1.jpg');
}
.hero li:nth-child(2) span { 
  background-image: url('http://image2.jpg');
}
.hero li:nth-child(3) span { 
  background-image: url('http://image3.jpg');
}

这是 html 以防万一。

<div id="hero-container" class="swipe slide">
  <ul class="hero transparent">
    <li><span>Image 01</span></li>
    <li><span>Image 02</span></li>
    <li><span>Image 03</span></li>
  </ul>
<div>

谢谢

Answer 1

使用 ({'background-image':'img.png'}) ?

编辑:

尝试:

var a = 1; // set n child
var bgUrl $(".hero li:nth-child("+a+") span").css("background-image"); // get bg img
$("#hero-container").css({"background-image":bgUrl}); // set bg img

您可能需要修补一些。

http://api.jquery.com/nth-child-selector/ http://api.jquery.com/css/