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/

Javascript来渲染kbd标记的元素

1 个答案: