在CSS javascript方法中使用變量

-1

任何人看到我在這裏做錯了嗎？使用jQuery創建圈子，然後用輸入字段中的變量填充它們。在CSS javascript方法中使用變量

問題：變量firstletter是不被顯示時1.有在輸入框中輸入2時，結果窗格中單擊生成圓。變量應該在圓圈的中間。

的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屬性使用。

這裏的小提琴： http://jsfiddle.net/hslincoln/ZM7dC/

來源

2014-07-23 Harry L

你有什麼跡象表明存在問題？我們可能能夠幫助確定爲什麼它可以描述*什麼是錯的。 – David

更新爲'問題'，@David –

相關：http://stackoverflow.com/questions/1762047/inline-content-css-property – raina77ow

需要使用.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++; 

});

來源

2014-07-23 17:36:21

這是光滑的男人，偉大。我建議將//推送信件放在//輸入內容的變量行上，以便在執行刪除操作時不會輸入val（）。再一次，我的錯誤是將我的錯誤包含在我的小提琴中！謝謝 –

@Rob，你的代碼跳過了第一個字母。而且文字也不在圓圈的中心。 –

葉真，我不打算爲他做所有的孩子功課:) –

內容只能與僞標籤一起使用。由於圓形div不是，內容根本不顯示。相反使用

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

此外，您不能使用.text來抓取jibberjabber內容。代替使用.VAL

來源

2014-07-23 17:39:52 Derongan

引用從W3Schools：

的content屬性用於與:before和:after僞元素，以插入生成的內容。

你沒有這些，所以內容無處可去。

@RobSchmuecker OP希望信件位於中心。另外，你的代碼跳過了第一個字母。

來源

2014-07-23 17:40:28 NTwers

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

問題是，您使用text()而不是val()。

jQuery的

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

CSS

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

使用上述代碼添加字母的跨度內，使信出現cirlce的中心。

這裏是工作fiddle

來源

2014-07-23 18:06:36

和另一種方法和不同的CSS，但結果相同。 http://jsfiddle.net/ZM7dC/15/ – Aleksandar

在CSS javascript方法中使用變量

回答

相關問題