javascript - 在 jQuery 中跨多个元素插入多个值

Question

我有一个几乎完全由 javascript 生成的页面。我有一个创建元素的主要功能，然后是一些可用于自定义每个元素的属性。大多数自定义是在 CSS 级别进行的，但我需要在每个元素中插入一个唯一的文本元素。

这是对象函数:

function buildButton(s, b) {
        $(s).append('<div id='+b.name+'></div>');
        $('#'+b.name).css({
            'position': 'absolute',
            'display': 'inline-block',
            'left': b.x,
            'top': b.y,
            'height': b.height,
            'width': b.width,
            'cursor': 'pointer',
            'z-index':5,
        });

我试图用这个创建独特的文本元素:

$('div[id |="controllerButt"]').append(b.buttText);

然后我们有函数调用:

buildButton(this, {
    name:'controllerButt-13',
    type: 'action',
    width:31, height:37,
    x:422, y:536,
    buttText: 'This is Button 13'
});

上面的结果输出“This is Button 13”，但它还附加了已设置的任何其他 buttText 实例，因此您发送“This is Button 13 This is Button 14 This is Button 15”等.

我应该如何处理这个问题，以便我只有“this”值而不是 buttText 的所有实例？

Answer 1

您可以在创建按钮的语句中设置文本

$(s).append('<div id='+b.name+'>'+b.buttText+'</div>');

或者使用一条长链

$('<div id='+b.name+'></div>')
 .text(b.buttText)
 .appendTo.(s)
 .css({
        'position': 'absolute',
        'display': 'inline-block',
        'left': b.x,
        'top': b.y,
        'height': b.height,
        'width': b.width,
        'cursor': 'pointer',
        'z-index':5,
 });