Question

我有一个创建按钮的工厂，

var btnFactory = (fn, text) => {
    var btn = $(`<button>${text}</button>`);
    btn.bind("click", fn);
    return btn;
};

我希望能够将多个按钮，已经绑定到处理程序的事件插入到一个元素中，所以我最终会这样做，

<div>
    <button>Button1</button>
    <button>Button2</button>
</div>

我正在试图使用.html()来实现它，但到目前为止它还没有找到我。

Answer 1

你不需要jQuery（而且效率更高）

// reusable template element for cloning
const btnTemplate = (() => {
  const bt = document.createElement("button")
  bt.type = "button"
  // other things you want all buttons to have, classname, etc.
  return bt
})()

const btnFactory = { fn, text } => {
  const btn = btnTemplate.cloneNode(false)
  btn.onclick = fn
  btn.innerHTML = text
  return btn
}

可以像

一样使用

const items = [ 
  { text: "Button1", fn: e => console.log("Button1 clicked") },
  { text: "Button2", fn: e => console.log("Button2 clicked") }
]

// Higher-order helper to fold a collection and a factory into
// a documentFragment
const intoDocFrag = (factoryFn, xs) =>
  xs.reduce((frag, x) => { 
    frag.appendChild(factoryFn(x))
    return frag
  }, document.createDocumentFragment())


document.body.appendChild(intoDocFrag(btnFactory, items))

Answer 2

我认为您要问的是如何使用此功能生成按钮？我在下面的代码段中提供了几种不同的方法：

＆＃13;

var btnFactory = (fn, text) => {
    var btn = $(`<button>${text}</button>`);
    btn.bind("click", fn);
    return btn;
};

// method 1
$('body').html(
    btnFactory(
        (function () {
            console.log('test 1')
        }),
        'test 1'
    )
)

// method 2
$('body').append(
  btnFactory(
    (function () {
      console.log('test 2');
    }),
    'test 2'
  )
)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app"></div>

＆＃13;

Answer 3

如果你的意思是插入带有for循环的一系列按钮，那么它非常简单。您需要为div元素提供ID，并创建一个如下变量：var divElement = document.getElementById('divElement1');。然后创建一个for循环，并插入按钮数量，如下所示：

var docFrag = document.createDocumentFragment()
for (var i = 1; i < (amount of buttons you want); i++)
{
var button = document.createElement("button");
button.addEventListener("click", fn);
button.value = "Button" + i;
docFrag.appendChild(button);
}
divElement.appendChild(docFrag);

希望这有帮助！

如何使用绑定事件插入多个按钮？

3 个答案: