javascript - 在 css javascript 方法中使用变量

Question

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

问题 变量firSTLetter 未显示时 1. 输入框中有输入 2. 单击结果 Pane 生成圆圈时.变量应该在圆圈的中间。

jQuery:

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

firSTLetter 是我在 content css 属性中使用的变量。

这是 fiddle : 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++;

});