查找关键字"id"并以内联样式更改其值

Question

我很难弄清楚这一点。

<div class="large-image" style="visibility: visible; cursor: default; background-image: url("images.sc?previewBinaryDataId=36"); background-position: 50% 50%;">
</div>

我正试图使用jquery来更改背景图像的url，只需更改DataId值

有什么建议吗？

Answer 1

如果我理解正确，您需要一个可以调用的function来更改这些图像？大概好吧，这里有一个：

function changeImg(newNum) {
    var div = $('.large-image');
    var parts = div.css('background-image').split('=');
    div.css({
        'background-image': parts[0] + '=' + newNum + '")'
    });
}

你可以把它连接到onClick或其他什么东西上，也可以这样称呼它：

changeImg(76);

这应该会奏效，但我只是猜测，因为没有HTML可以查看。

Answer 2

我不知道您的示例是否正确，因为您没有"dataid"值。此外，您还有一个双引号，它终止了样式列表（就在url(之后）。你希望得到像这样的东西吗

<div data-image-url="foo.jpg" id="myDiv">

最终成为

<div data-image-url="foo.jpg" id="myDiv" style="background-image:url('foo.jpg')">

如果是这样，那么您可以执行以下

var image = $('#myDiv').data('image-url');
$('#myDiv').css("background-image", "url('" + image + "')");

编辑：看起来您想要替换previewBinaryDataId值。这将保留您试图保留的图像文件（image.sc）

var someNewId = 49
var reg = new RegExp(/(?:previewBinaryDataId=)(d+)/)
$('#myDiv').css('background-image').replace(reg, 'previewBinaryDataId=' + someNewId);

Answer 3

你可以试试这样的东西：

jQuery(document).ready(function(){
var number = 39;
var backgroundNumber = "url('images.sc?previewBinaryDataId=" + number +"')";
  jQuery('.large-image').css({
    "background-image": backgroundNumber
  });
});

如果您希望DataId字段是动态的，那么只需将数字变量更改为动态即可。

这是一个工作小提琴的链接：

https://fiddle.jshell.net/urxz8zoj/

希望这能有所帮助！