Question

任何人都能看到我在这里做错了什么？使用jQuery创建圆圈，然后用输入字段中的变量填充它们。

问题：当输入框中有输入时，变量firstletter未显示; 2.单击结果窗格生成变量// making of the circles $('<div/>').attr({ 'id': i }).addClass('circle').css({ 'top': e.pageY - 75, 'left': e.pageX - 75, 'content': firstletter }).appendTo('#area');时圈。变量应该在圆圈的中间。

jQuery的：

firstletter

content是我在{{1}} css属性中使用的变量。

这里是小提琴： http://jsfiddle.net/hslincoln/ZM7dC/

Answer 1

需要使用.val()代替.text()并添加firstletter作为div的内容https://developer.mozilla.org/en-US/docs/Web/CSS/content

演示：http://jsfiddle.net/robschmuecker/ZM7dC/7/

var i = 0;
$('#area').bind('click', function (e) {

    // input stuff
    $('#jibberjabber').val(

    function (index, value) {
        var jimmy = value.substring(1);
        return jimmy;
    });

    // push letter to variable ready for circle
    var jibberjabbercontent = $('#jibberjabber').val();
    var firstletter = jibberjabbercontent.charAt(0);
    console.log(jibberjabbercontent, firstletter);

    // making of the circles
    $('<div>' + firstletter + '</div>').attr({
        'id': i
    }).addClass('circle').css({
        'top': e.pageY - 75,
            'left': e.pageX - 75
    }).appendTo('#area');
    i++;

});

Answer 2

根据您的要求更新了小提琴。

问题是，您使用的是text()而不是val()。

的jQuery

$('#'+i).html('<span class="charIn">'+firstletter+'</span>');

CSS

.charIn{
  position:absolute;
  top:47%;
  left:46%;
 }

使用上面的代码在span中添加字母，使字母显示为cirlce的中心。

这是工作fiddle

Answer 3

内容只能与伪标签一起使用。由于圆形div不是，因此内容根本不显示。而是使用

.addClass('circle').css({
    'top': e.pageY - 75,
        'left': e.pageX - 75,
}).text(firstletter).appendTo('#area');

此外，您无法使用.text来抓取jibberjabber内容。而是使用.val

Answer 4

引自W3Schools：

content属性与:before和:after伪元素一起使用，以插入生成的内容。

你没有其中任何一个，所以内容无处可去。

@RobSchmuecker OP希望这封信在中心。此外，您的代码会跳过第一个字母。

在css javascript方法中使用变量

4 个答案: