如何通过单击和使用 vanilla js 来更改 div 的图标? [英] how to change the icon of a div by clicking and using vanilla js?

查看：30
本文介绍了如何通过单击和使用 vanilla js 来更改 div 的图标?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试单击标题以显示内容并更改标题旁边的图标.

主要思想是有一个加号，点击时内容可见，图标变成减号.

我正在使用 scss 和 vanilla js，到目前为止我有这个:

var jsaccordion = {初始化:函数(目标){var headers = document.querySelectorAll("#" + target + " .accordion-titulo");if (headers.length > 0) { for (var head of headers) {head.addEventListener("click", jsaccordion.select);}}},选择:函数(){var内容 = this.nextElementSibling;content.classList.toggle("打开");}};window.addEventListener('加载', function(){jsaccordion.init("手风琴定义");});

.accordion-titulo::before {内容: ".";显示:块；背景: url("./../Iconos/Icono\ some-icon");背景重复:不重复；背景位置:中心；光标:指针；宽度:35px；高度:35px；颜色:透明；浮动:对；}.accordion-texto {显示:无；颜色:#808080；填充:15px；}.accordion-texto.open {显示:块；}.accordion-titulo.open {背景: url("./../Iconos/Icono\ some-different-icon.svg");背景重复:不重复；背景位置:98% 居中；}

<div id="accordion-definiciones"><div class="my-3"><h3 class="accordion-titulo ">¿Lorem ipsum?</h3><div class="accordion-texto"><p>Lorem ipsum dolor sat amet consectetur adipisicing elit.Illo，animi perferendis necessitatibus sint molestiae eius magni！Libero voluptas mollitia laudantium，ad nihil cum quibusdam rerum labouriosam quia ea facere temporibus.</p>

我知道使用 Jquery 会更容易，但我想使用 vanilla js 来做到这一点

解决方案

从你的代码看来，图标 some-different-icon 应该放在 :before 选择器中，作为图标some-icon 被添加到 :before 中.

此外，在 JavaScript 方面，您将 open 类设置为 .accordion-titulo(即 .accordion-文本).因此，您的 .accordion-titulo.open 样式将永远不会适用.

相反，我会在 .accordion-titulo 元素中设置 open 类，并使用 CSS 兄弟显示 .accordion-texto选择器 +.

包装所有这些，代码看起来像:

var jsaccordion = {初始化:函数(目标){var headers = document.querySelectorAll("#" + target + " .accordion-titulo");if (headers.length > 0) { for (var head of headers) {head.addEventListener("click", jsaccordion.select);}}},选择:函数(){this.classList.toggle("打开");}};window.addEventListener('加载', function(){jsaccordion.init("手风琴定义");});

.accordion-titulo::before {内容: " ";显示:块；背景: url("./../Iconos/Icono\ some-icon");背景重复:不重复；背景位置:中心；光标:指针；宽度:35px；高度:35px；颜色:透明；浮动:对；}.accordion-texto {显示:无；颜色:#808080；填充:15px；}.accordion-titulo.open + .accordion-texto{显示:块；}.accordion-titulo.open::before {背景: url("./../Iconos/Icono\ some-different-icon.svg");背景重复:不重复；背景位置:98% 居中；}

<div id="accordion-definiciones"><div class="my-3"><h3 class="accordion-titulo ">¿Lorem ipsum?</h3><div class="accordion-texto"><p>Lorem ipsum dolor sat amet consectetur adipisicing elit.Illo，animi perferendis necessitatibus sint molestiae eius magni！Libero voluptas mollitia laudantium，ad nihil cum quibusdam rerum labouriosam quia ea facere temporibus.</p>

I'm trying to click on a title to display content and change the icon next to the title.

The main idea is that there is a plus sign and that when clicking, the content is visible and the icon changes to a minus sign.

I am working with scss and vanilla js, so far I have this:

var jsaccordion = {
    init : function (target) {  
      var headers = document.querySelectorAll("#" + target + " .accordion-titulo");
      if (headers.length > 0) { for (var head of headers) {
        head.addEventListener("click", jsaccordion.select);
      }}
    },

    select : function () {        
      var contents = this.nextElementSibling;
      contents.classList.toggle("open");
    }
  };
  window.addEventListener('load', function(){
    jsaccordion.init("accordion-definiciones");
  });

.accordion-titulo::before {
  content: ".";
  display: block;
  background: url("./../Iconos/Icono\ some-icon");
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  width: 35px;
  height: 35px;
  color: transparent;
  float: right;
}
.accordion-texto {
  display: none;
  color: #808080;
  padding: 15px;
}
.accordion-texto.open {
  display: block;
}
.accordion-titulo.open {
  background: url("./../Iconos/Icono\ some-different-icon.svg");
  background-repeat: no-repeat;
  background-position: 98% center;
}

<div id="accordion-definiciones">
    <div class="my-3">
      <h3 class="accordion-titulo ">¿Lorem ipsum?</h3>
         <div class="accordion-texto">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, animi perferendis necessitatibus sint molestiae eius magni! Libero voluptas mollitia laudantium, ad nihil cum quibusdam rerum laboriosam quia ea facere temporibus.</p>
         </div>
     </div>
</div>

I know it can be easier with Jquery but I want to do it with vanilla js

解决方案

From your code, it seems that the icon some-different-icon should be placed in a :before selector, as the icon some-icon is being added in a :before.

Also, on the JavaScript side you are setting the class open to the next sibling element of the .accordion-titulo (which is the .accordion-texto). So, your styles for .accordion-titulo.open will never apply.

Instead, I would set the open class in the .accordion-titulo element and show the .accordion-texto with the CSS sibling selector +.

Wrapping all that, the code would look like:

var jsaccordion = {
    init : function (target) {  
      var headers = document.querySelectorAll("#" + target + " .accordion-titulo");
      if (headers.length > 0) { for (var head of headers) {
        head.addEventListener("click", jsaccordion.select);
      }}
    },

    select : function () {        
      this.classList.toggle("open");
    }
  };
  window.addEventListener('load', function(){
    jsaccordion.init("accordion-definiciones");
  });

.accordion-titulo::before {
  content: " ";
  display: block;
  background: url("./../Iconos/Icono\ some-icon");
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  width: 35px;
  height: 35px;
  color: transparent;
  float: right;
}
.accordion-texto {
  display: none;
  color: #808080;
  padding: 15px;
}
.accordion-titulo.open + .accordion-texto{
  display: block;
}
.accordion-titulo.open::before {
  background: url("./../Iconos/Icono\ some-different-icon.svg");
  background-repeat: no-repeat;
  background-position: 98% center;
}

<div id="accordion-definiciones">
    <div class="my-3">
      <h3 class="accordion-titulo ">¿Lorem ipsum?</h3>
         <div class="accordion-texto">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, animi perferendis necessitatibus sint molestiae eius magni! Libero voluptas mollitia laudantium, ad nihil cum quibusdam rerum laboriosam quia ea facere temporibus.</p>
         </div>
     </div>
</div>

这篇关于如何通过单击和使用 vanilla js 来更改 div 的图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆