在JavaScript中更改菜单上活动图标的背景 [英] Change the background of an active icon on a menu in JavaScript

问题描述

我正在尝试使蓝色背景色保持在SVG图标上，该图标正在使用纯JavaScript主动显示文本.我还从语义UI中获得了图标.

I'm trying to make a blue background color to stay on the SVG icon that is active displaying the text using pure JavaScript. I'm also getting icons from semantic UI.

这是当前菜单列表的代码，到目前为止clg会为我打印 for 中的项目:

This is the code of the current menu list, and so far clg prints me the items inside for:

<span class="menu-bar">
  <a href="javascript:void(0)" class="itemList"> <svg><svg/> </a>
  <a href="javascript:void(0)" class="itemList"> <svg><svg/> </a>
  <a href="javascript:void(0)" class="itemList"> <svg><svg/> </a>
  <a href="javascript:void(0)" class="itemList"> <svg><svg/> </a>
  <i class="angle left icon iconColor tooltip" id="angle_icon"></i>
  <i class="text height icon iconColor tooltip" id="measure_icon"></i>
</span>

CSS

.menu-bar {
   display: block;
   width: 100%;
   height: 100%;
   margin-top: -10px;
}

.menu-bar svg {
    display: inline-block;
    width: 1em;
    padding: 0.3em;
    border-radius: 4px;
    margin-right: 20px;
}

.menu-bar a.toggle-state  {
   background-color: #1A41B5;
}

JavaScript代码(到目前为止)

function changeIndex(){
    for (let i = 0; i <= items.length; i++) {
        console.log(items[i])
    }
}

---

我设法用以下方法修复了它:

---

I managed to fixed it with:

function _clearIcon() {
    for (const icon of items) {
        if(icon.classList.contains('menu-barActive')) {
            icon.classList.remove('menu-barActive')
        }
    }
}

function changeIndex() {
    for (const icon of items) {
        icon.onclick=()=> {
            _clearIcon()
            let activeId = document.getElementById(icon.id)
            activeId.classList.add('menu-barActive')
        }
    }

推荐答案

在现代浏览器中，您可以使用自定义元素来创建您自己的HTML标签.

In modern browsers you can use Custom Elements to create your own HTML tags.

定义自定义元素< icon-toolbar> 和< svg-icon> 一次

您所写的是:

    <icon-toolbar>
      <svg-icon is="icon1"></svg-icon>
      <svg-icon is="icon2"></svg-icon>
      <svg-icon is="icon3"></svg-icon>
      <svg-icon is="icon4"></svg-icon>
    </icon-toolbar>

下面的SO代码段.

JSFiddle，位于: https://jsfiddle.net/CustomElementsExamples/yx27sh08/

JSFiddle at: https://jsfiddle.net/CustomElementsExamples/yx27sh08/

customElements.define("icon-toolbar", class extends HTMLElement {
    connectedCallback() {
      this.icons = [...this.querySelectorAll("svg-icon")];
      this.addEventListener("click", (evt) => {
        const select = (icon, selected = true) => {
          if (selected) icon.setAttribute("selected", "selected");
          else icon.removeAttribute("selected");
        }
        const clickedicon = evt.target.closest("svg-icon");
        if (evt.ctrlKey) select(clickedicon, !clickedicon.hasAttribute("selected"));
        else {
          this.icons.map(icon => icon.hasAttribute("selected") && select(icon, false));
          select(clickedicon);
        }
      });
    }
  })
  customElements.define("svg-icon", class extends HTMLElement {
    connectedCallback() {
      const path = {
        icon1: "M80 35a5 5 0 01-5-6V17a7 7 0 00-7-6H56a5 5 0 010-11h12a17 17 0 0118 17v12a5 5 0 01-6 6zM5 35a5 5 0 01-5-6V17A17 17 0 0117 0h12a5 5 0 010 11H17a7 7 0 00-6 6v12a5 5 0 01-6 6z",
        icon2: "M43 86a5 5 0 01-6-6V5a5 5 0 0111 0v75a5 5 0 01-5 6zm37-38H5a5 5 0 010-11h75a5 5 0 110 11zM43 86a5 5 0 01-4-2L28 73a5 5 0 014-9h22a5 5 0 014 9L47 84a5 5 0 01-4 2zm11-64H32a5 5 0 01-4-9L39 2a5 5 0 014-2 5 5 0 014 2l11 11a5 5 0 01-4 9z",
        icon3: "M5 43a38 38 0 0038 38V5A38 38 0 005 43z",
        icon4: "M86 86H5a5 5 0 110-11h81a5 5 0 110 11zm-25 0H27a5 5 0 01-3-2L6 66a19 19 0 010-27l17-17a5 5 0 017 0l45 45a5 5 0 010 7L65 84a5 5 0 01-4 2zM30 75h29l5-5-37-37-14 14a8 8 0 000 12z",
      } [this.getAttribute("is")];
      this.innerHTML = `<svg viewBox='0 0 85 85'><path d='${path}'/></svg>`
    }
  })

icon-toolbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
    grid-gap: 5px;
  }
  svg-icon {
    cursor: pointer;
    background: black;
    fill: #b8b8b8;
  }
  svg-icon:hover {
    background:lightgreen;
    fill:black;
  }
  svg-icon[selected] {
    background: green;
    fill: gold;
  }
  svg-icon[selected]:hover {
    background: lightcoral;
    fill: grey;
  }

Select multiple with Control Key
<icon-toolbar>
  <svg-icon is="icon1"></svg-icon>
  <svg-icon is="icon2"></svg-icon>
  <svg-icon is="icon3"></svg-icon>
  <svg-icon is="icon4"></svg-icon>
</icon-toolbar>

更高级的< svg-icon> 位于 https://IconMeister.github.io

应该可以在Angular，Vue或Svelte中正常工作.对于React，您必须跳过一些障碍...因为只有71％的React支持此现代W3C标准( https://custom-elements-everywhere.com/)

Should work fine in Angular, Vue or Svelte. For React you have to jump through some hoops... as React only for 71% supports this modern W3C standard (https://custom-elements-everywhere.com/)

这篇关于在JavaScript中更改菜单上活动图标的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！