0

这是我正在使用的代码（http://jsbin.com/ESOdELU/1/edit） -

var wordRandomizer = {
run : function(targetElem) {
var markup = this.createMarkup();
targetElem.appendChild(markup);
},
createMarkup : function() {
var that = this;
var frag = document.createDocumentFragment();

this.elem = document.createElement('span');

var button = document.createElement('button');
button.innerText = 'Change Item';
button.addEventListener('click', function() {
  that.changeItem();
});

frag.appendChild(this.elem);
frag.appendChild(button);

return frag;
},
changeItem : function() {
var rand = this.getRandInt(1, this.items.length) - 1;
console.log(rand);
this.elem.innerText = this.items[rand];
},
getRandInt : function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
items : [
'itemA',
'itemB',
'itemC',
'itemD'
]
};

wordRandomizer.run(document.body);

我希望能够生成按钮下方而不是旁边的项目。我怎样才能做到这一点？作为奖励，我还想知道如何在无需编辑每个项目的情况下格式化项目的字体。

4

2 回答 2

0

你有几个选项来获取按钮下方的行。您可以将跨度交换为 div，并在跨度之前添加按钮

frag.appendChild(button);
frag.appendChild(this.elem);

另一种选择是更改您的 html 并添加换行符或给跨度一个 display: block 属性。

如果您真的不想交换将按钮和元素添加到 DOM 的顺序，您可以使用 position 来移动它们。http://www.w3schools.com/css/css_positioning.asp

所以例如你可以添加这个CSS

span : {
     display : block;
     font-family : // list of fonts ;
}
于 2013-10-29T04:27:34.373 回答
0

这是您的代码，其中包含您要求的所有更改：http: //jsbin.com/ESOdELU/8/edit

var wordRandomizer = {
  run : function(targetElem) {
    var markup = this.createMarkup();
    targetElem.appendChild(markup);
  },
  createMarkup : function() {
    var that = this;
    var frag = document.createDocumentFragment();

    this.elem = document.createElement('span');
    this.elem.style.color = "blue";

    var button = document.createElement('button');
    var br = document.createElement("br");
    button.innerText = 'Change Item';
    button.addEventListener('click', function() {
      that.changeItem();
    });

    frag.appendChild(button);
    frag.appendChild(br);
    frag.appendChild(this.elem);    

    return frag;
  },
  changeItem : function() {
    var rand = this.getRandInt(1, this.items.length) - 1;
    console.log(rand);
    this.elem.innerText = this.items[rand];
  },
  getRandInt : function(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  },
  items : [
    'itemA',
    'itemB',
    'itemC',
    'itemD'
  ]
};

wordRandomizer.run(document.body);

您可以在跨度上使用一个类，或者如果您想继续在 JS 中完全包含它，请在我给您的示例的基础上使用蓝色字体颜色。

于 2013-10-29T04:47:19.103 回答