将图像从 css 调用到 javascript 并添加整数值

Question

我在 css 上有一张背景图片（从文件上传），我需要将其放入我的 javascript 文件中并为其添加一个整数值，也许将其放入数组中（如果有益则可选）。我想添加一个整数，因为每次我单击此特定图像时，它都会被添加到 "score" 部分（已设置）。

有什么可行的方法吗？

这是代码片段： css

div#gamearea4x4 div.row1#ga4r11{
    background-image: url(../graphics/8.png);
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    margin: 2px;
    border-radius: 5px;

以及 javascript 的各种尝试：

var img1 = document.getElementById("#ga4r11").style.backgroundImage;
img.value = "8";

或

var logo = $("#ga4r11").css('background-image').value = "8";

Answer 1

您是否将整数添加到放置图像的 div 中？这可能是您正在寻找的：

var int = 8;
$("#ga4r11").css('background-image', '/'+int+'.png').attr('value', int);

这样你可以动态设置整数。每次有人点击图片 / div:

$('#ga4r11').on('click', function(){
    int++;
    $("#ga4r11").attr('value', int);
});

如果你想让它更动态，你也可以动态设置 div id：

var int = 8;
var image_id = "image_" + int; 
$("#"+image_id).css('background-image', '/'+int+'.png').attr('value', int)

您必须 class 所有图像 ID（例如

<div class="images" id="image_x">

) 如果点击 class:

然后调用

 $('.images').on('click', function(){
    int++;
    $(this).attr('value', int);
});

这将为正确的 ID 设置正确的值。

将图像从 css 调用到 javascript 并添加整数值

calling image from css to javascript and adding integer value

javascript

css

arrays

image

background-image