Question

我的页面中有bootstrap Dropdown component：

<div class="btn-group">
   <button class="btn dropdown-toggle" data-toggle="dropdown" title="Police"><i class="fa fa-font"></i>&nbsp;<b class="caret"></b></button>
   <ul class="dropdown-menu" id="fonts"></ul>
</div>

我正在使用此脚本填充此Dropdown component：

var fonts = [
    'Serif',
    'Sans',
    'Arial',
    'Arial Black',
    'Courier', 
    'Courier New',
    'Comic Sans MS',
    'Helvetica',
    'Impact',
    'Lucida Grande',
    'Lucida Sans',
    'Tahoma',
    'Times',
    'Times New Roman',
    'Verdana'
];

var fontsDropDown   = document.getElementById('fonts');
fonts.forEach(function(police){
    var li  = document.createElement('li');
    var a   = document.createElement('a');
    a.style = "font-family:'" + police + "'";
    a.appendChild(document.createTextNode(police));
    li.appendChild(a);
    fontsDropDown.appendChild(li);
});

我有一个可编辑的div：

<div id="editor" contentEditable="true"> Enter your text here.. </div>

我希望当我选择Dropdown component中的某个元素来更改可编辑div中所选文本的字体时，我尝试为<a>中的每个<ul>添加一个eventListener Dropdown component：

var fontsArray = Array.prototype.slice.call(document.querySelectorAll('#fonts li a'));
fontsArray.forEach(function(value){
    value.addEventListener('click', function(){
        document.execCommand('fontName', false, value);
    }, false);
});

但它不起作用，我尝试直接测试document.execCommand('fontName', false, value);按钮上的Dropdown component，如下所示：

document.getElementById('fonts').addEventListener('click', function(){
        document.execCommand('fontName', false, 'Comic Sans MS');
    }, false);

它有效，所以我想我只需要在Dropdown component'上获取所选元素值，并将其替换为document.execCommand()的第三个参数。

我厌倦了搜索那样做的脚本，而我所能找到的只是jQuery：

$(function(){

    $(".dropdown-menu li a").click(function(){

      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());

   });

});

但我希望使用纯JavaScript来获取所选项目。

我该怎么做？

Answer 1

Hey Aimad我相信这会解决问题：

var fontsArray = document.getElementById('fonts').getElementsByTagName('a');
var l = fontsArray.length;
for(i = 0; i<l; i++){
  tag = fontsArray[i];
  tag.addEventListener('click', function(){
    var value = this.innerHTML;
    document.execCommand('fontName', false, value);
  }, false);
};

您需要按var value = this.innerHTML;重新定义值才能访问该字体的名称。

希望有所帮助。

干杯

在Bootstrap按钮下拉列表中获取所选元素

1 个答案: