javascript - 如何将属性添加到我的自定义元素并能够对其值更改触发操作

Question

事实上，标题并没有完全涵盖我所追求的。我已经创建了自己的选择元素。它由一些 div、ul/li 和隐藏的输入元素组成。它当然有标记和 javascript 部分。这是 html:

<div id="ddlCars" class="ma-select" style="width:350px;">
        <div class="ma-select-box"><input class="ma-select-box-filter" type="text"></div>
        <div class="ma-select-options">
            <ul class="ma-select-ul">
                <li class="ma-select-li ma-visible-option" optvalue="7">MERCEDES</li>
                <li class="ma-select-li ma-visible-option" optvalue="10">BMW</li>
                <li class="ma-select-li ma-visible-option" optvalue="14">AUDI</li>
                <li class="ma-select-li ma-visible-option" optvalue="3">VOLKSWAGEN</li>
            </ul>
        </div>
        <input class="ma-select-hidden"  type="hidden">
    </div>

javascript 代码只是一堆函数，可以捕获点击、悬停、键盘弹起等事件，并在就绪方法上(按类)绑定(bind)到上述元素。我还没有为此自定义选择声明任何类型。

使用普通的 DOM 选择元素，我可以这样做:

 document.getElementById("mySelect").selectedIndex=0;

现在我想实现类似的东西。我可以通过 id 或类名找到包装器 div。但是有什么方法可以做这样的事情吗？

$('#ddlCars').selectedIndex=1;

所以不知何故，我需要向我的自定义选择添加一个属性并捕捉它的变化以将选择的值设置为相应的 li 元素。

Answer 1

要获得与 select 元素相同的行为，您可能希望像扩展普通类一样扩展该元素。也许使用像 Polymer、github.com/richardanaya/webblock 或 github.com/SaulDoesCode/Crafter.js 这样的库以这种方式设计您的自定义元素。

否则您应该使用 getter 和 setter 手动实现它。
您必须使用 Object.defineProperty 在元素上使用 getter 和 setter 创建此类自定义行为。

这里有一个漂亮的小函数可以让这更容易

   function newGetSet(element ,key, get, set) {
         Object.defineProperty(element, key, {
           set: set,
           get: get
         });
   }
   // then use it - just a rough example 
   newGetSet( myElement , 'selectedIndex' , index => {
      // perhaps then apply a class or something to make it active
      document.querySelectorAll('ul > li')[index].classList.add('active');
   }, () => {
      let active_index = 0;
      Array.from(document.querySelectorAll('ul > li')).forEach((item,index) => {
          if(item.classList.contains('active')) active_index = index;
      });
      return active_index;
   });

当然，正如另一个答案所提到的，要对自定义选择列表中的项目产生预期的效果，可能会附加 en EventListener。

因此请考虑属性“selectedIndex”已在父元素上定义，因此您可以简单地添加将更新父元素的监听器。

[...document.querySelectorAll('ul > li')].forEach((item,index) => {
    item.addEventListener('click',evt => {
       item.parentNode.selectedIndex = index;
    });
});