jquery - 在多背景div中更改一个背景图像的位置

我有一个简单的HTML:<div id="wrapper"></div>和这个样式表：

#wrapper{

        position: absolute;

        width: 400px;
        height: 400px;

        background-image: url(img1.png), url(img2.png);

        background-repeat: no-repeat, no-repeat;

        background-position: top center, center center;

        background-color: green;
        border: 1px solid black;

}

如上所述，样式表显示#wrapper在不同位置有两个背景图像。
我想改变第二个图像的位置，鼠标点击应用没有改变第一个图像的位置。我必须使用什么语法？
我的jquery代码：

$("#wrapper").click(function(){
    this.css("background-position": " ? , bottom right " );
});

我认为?应该替换为类似!important的内容，但是!important不适用于对第一张图像应用no change。
两个背景图像的位置会在不同的地方发生变化，我不知道现在的第一个图像位置是什么，我可以把它的位置保存在一个变量中，但是我宁愿使用原生的解决方案，如果存在的话。
有什么建议吗？

最佳答案

更改背景位置2
这将用bottom right替换第二个背景位置（逗号之后）：

$('#wrapper').click(function() {
    $(this).css('background-position', function() {
        return this.style.backgroundPosition.replace(/,(.*)$/, ', bottom right');
    });
});

更改背景位置1
这将用bottom right替换第一个背景位置（逗号之前）：

$('#wrapper').click(function() {
    $(this).css('background-position', function() {
        return this.style.backgroundPosition.replace(/(.*),/, 'bottom right, ');
    });
});

如果元素只有两个背景，并且我们希望更改每个背景图像的位置或任何其他属性，则此解决方案是一个不错的选择