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

事实上,标题并没有完全涵盖我所追求的内容.我创建了自己的选择元素.它由一些div,ul / li和隐藏的输入元素组成.它当然得到了标记和javascript部分.这是html：

javascript代码只是一堆捕获click,hover,keyup等事件的函数,并且在ready方法上绑定到上面的元素(按类).我没有为此自定义选择声明任何类型.

使用普通的DOM select元素,我可以这样做：

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

现在我想实现类似的东西.我可以通过id或类名找到包装器div.但有没有办法可以做这样的事情？

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

所以不知何故,我需要在我的自定义选择中添加一个属性并捕获其更改以将selelcted值设置为相应的li元素.

最佳答案

获得与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,{
           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;
   });

当然,正如另一个答案所提到的,为了在自定义选择列表中的项目上获得所需的效果,可以附加到EventListener.

因此,请考虑在父元素上定义属性“selectedIndex”,因此您只需添加将更新父元素的Listeners.

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。