Question

我遇到了一个问题，我的CSS文件中添加了一个文本。我尝试了关键字内容，但这似乎没有用。

所以我想要做的是，当用户点击图像时我想添加数字（按增量顺序）。例如。点击1应该说1（白色框旁边），然后点击2等。

我添加了一个名为counter的变量，并将其初始化为0。因此，当用户点击counter时，1会增加content。但是，我认为仅{{1}}属性就足够了，因为我想为白色以外的文本赋予颜色（这是盒子的颜色）。

以上代码是我要编辑的内容。但是，我创建了另一个JSfiddle来做一个样本。 Here is the code for it

Answer 1

只需将数字放在div中：

$(document).ready(function(){ 
    var count = 0;

    $(document).click(function (ev) {        
        $("body").append(            
            $('<div>' + ++count + '</div>').css({
                position: 'absolute',
                top: ev.pageY + 'px',
                left: ev.pageX + 'px',
                width: '40px',
                height: '40px',
                background: '#fff'
            })              
        );               
    });
});

Answer 2

您可以在js文件的开头插入var counter = 0;来初始化变量，而不是点击功能插入counter++;以在每次点击时增加计数器;在"<div></div>"中的身体附加功能更改'<div>' + counter + '</div>'。

所以你的代码看起来像这样：

$(document).ready(function(){ 
var counter = 0;

    $(document).click(function (ev) {   
        counter++;
        $("body").append(            
            $('<div>' + counter + '</div>').css({
                position: 'absolute',

                top: ev.pageY + 'px',
                left: ev.pageX + 'px',
                width: '40px',
                height: '40px',
                background: '#fff'

            })              
        );               
    });

});

在图像上添加数字

2 个答案: