javascript - 用于呈现 kbd 标记元素的 Javascript

Question

我想编写一个（Javascript？）函数以包含在 HTML 页面中，该函数允许我呈现标记kbd为由“+”分隔的函数参数，并且能够接受任意数量的输入参数。

因此，例如，将fnRenderKBD(Ctrl+X, Y, Z)呈现为Ctrl+X++ Y。Z

重要的是该函数应该能够接受可变数量的参数。

是否可以编写这样的函数（如果可以，如何编写）？我对JS几乎一无所知。

Answer 1

我在底部的答案不是我写过的最好的东西。更好的解决方案如下所示：

function fnRenderKBD(elem, keysToDisplay) {
    var delimiter = '';
    var content = null;
    for(var i = 0, length = keysToDisplay.length; i < length; i++) {
        var renderedKey = document.createElement('kbd');
        renderedKey = setText(renderedKey, keysToDisplay[i]);

        if (i > 0) {
            elem.appendChild(document.createTextNode('+'));
        }

        elem.appendChild(renderedKey);
    }
}

function setText(elem, text) {
   if (elem.textContent){
      elem.textContent = text;
   }else{
      elem.innerText = text;
   }

   return elem;
}

(function() {
    var keys = [
        'Ctrl+X',
        'Y',
        'Z'
    ];

    var elem = document.getElementById('display');

    fnRenderKBD(elem, keys);
}());​

演示：http: //jsfiddle.net/wPg7z/

---

像这样的东西应该工作：

function fnRenderKBD(elem, keysToDisplay)
{
    var delimiter = '';
    var content = '';
    for(var i = 0, length = keysToDisplay.length; i < length; i++) {
        content+= delimiter + '<kbd>' + keysToDisplay[i] + '</kbd>';
        delimiter = '+';
    }

    elem.innerHTML = content;
}

(function() {
    var keys = [
        'Ctrl+X',
        'Y',
        'Z'
    ];

    var elem = document.getElementById('display');

    fnRenderKBD(elem, keys);
})();
​

演示：http: //jsfiddle.net/gTYxP/1/