Javascript来呈现kbd标记的元素 [英] Javascript to render kbd tagged elements

问题描述

我想编写一个（Javascript？）函数来包含在HTML页面中，这样我可以呈现标记为 kbd 的函数参数，并用+分隔并能够接受任意数量的输入参数。

例如， fnRenderKBD（Ctrl + X，Y，Z）会呈现为 Ctrl + X + Y + Z 。

重要的是函数应该能够获取可变数量的参数。

是否可以编写这样的函数（如果是这样，如何）？我几乎没有任何关于JS的知识。

解决方案

我的答案并不是我写过的最好的东西。一个更好的解决方案看起来像这样：

  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）; 
 
 
 
函数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/

---

类似这样的东西应该可以工作：

 函数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/

I would like to write a (Javascript?) function to be included in HTML pages that allows me to render the function arguments tagged as kbd separated by "+"s and able to take an arbitrary number of input arguments.

So, for example, fnRenderKBD(Ctrl+X, Y, Z) would render as Ctrl+X+Y+Z.

The important thing is that the function should be able to take a variable number of arguments.

Is it possible to write such a function (if so, how)? I have next to no knowledge of JS.

解决方案

My answer at the bottom is not the best thing I have ever written. A better solution would look something like:

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);
}());​

Demo: http://jsfiddle.net/wPg7z/

---

Something like this should work:

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);
})();
​

Demo: http://jsfiddle.net/gTYxP/1/

这篇关于Javascript来呈现kbd标记的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！