0

当用户单击“i”元素时，我正在尝试在“p”元素上添加“活动”类。我试图遍历“p”元素，但它为所有“p”元素添加了类。我想要的是将类“活动”添加到仅单击“i”的“p”元素。此外，如果任何“p”元素上存在一个“活动”类，我还需要删除它。这是示例代码

window.onload = function () {
            let y = document.getElementsByClassName("fa");
            for (let i = 0; i < y.length; i++) {
                y[i].addEventListener('click', classWork);
            }

              function classWork(e) {

                  let z = document.getElementsByTagName("p");
                  for (i = 0; i < z.length; i++) {
                      z[i].classList.add("active");
                      
                          
                      }
                  }
              } 
<div id="otherele" class="m-design">
                <li class="first-1">
                   
                    <h4>CHOOSE YOUR STYLE</h4> <span class="info">
                        <i class="fa fa-info-circle"></i></span>

                    <p>Select from full selection of Suites, Jackets, Shirts and much more to <br>get your best look
                    </p>
                </li>
                <li class="first-1">
                    
                    <h4>CUSTOMIZE</h4> <span class="info" id="text-update">
                        <i class="fa fa-info-circle"></i></span>

                    <p>You may customize every detail of your garment and we will make exactly how you want it. You can
                        customize Buttons, Monogram, Lining, Pant style etc.
                    </p>
                </li>
</div>

4

3 回答 3

0

您可以使用父子技术

I am on mobile so please see syntax 

<div id="otherele" class="m-design">
                <li class="first-1">
                   
                    <h4>CHOOSE YOUR STYLE</h4> <span class="info">
                        <i class="fa fa-info-circle"></i></span>

                    <p>Select from full selection of Suites, Jackets, Shirts and much more to <br>get your best look
                    </p>
                </li>
                <li class="first-1">
                    
                    <h4>CUSTOMIZE</h4> <span class="info" id="text-update">
                        <i class="fa fa-info-circle"></i></span>

                    <p>You may customize every detail of your garment and we will make exactly how you want it. You can
                        customize Buttons, Monogram, Lining, Pant style etc.
                    </p>
                </li>
</div>
 window.onload = function () {
            let y = document.getElementsByClassName("fa");
            for (let i = 0; i < y.length; i++) {
                y[i].addEventListener('click', classWork(y[i]);
            }
       
              function classWork(e) {
                  Let p = e.parentNode.parentNode.parentNode.childNodes[1]:
If p.classList.contain('active'){
 p.classList.remove('active')

}
else{
p.classList.add('active');
}
                  let z = document.getElementsByTagName("p");
                  for (i = 0; i < z.length; i++) {
                      z[i].classList.add("active");
                      
                          
                      }
                  }
              }

您可以使用 console.log 检查子节点标签名称

于 2021-02-27T10:28:02.840 回答
0

您可以this在您的功能上使用来选择“当前点击”元素。然后，通过“树”并选择<p>要添加类的元素。

编辑：您可以使用 jstoggle()函数来检查您的类是否存在于所有“p”元素上，如果是则将其删除。

window.onload = function () {
    let y = document.getElementsByClassName("fa");
    let ps = document.getElementsByTagName('p');
    for (let i = 0; i < y.length; i++) {
        y[i].addEventListener('click', function(){
        
        [...ps].forEach(p => {
            p.classList.toggle('active', false);
        })
        
     // Get the nearest parent "li"
      const parent = this.closest('li');
      
      // Add your active class
      const child = parent.querySelector('p').classList.add('active');
    });
    }
 } 
.active{
  color: SlateBlue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
 <div id="otherele" class="m-design">
     <li class="first-1">
         <h4>CHOOSE YOUR STYLE</h4> 
     <span class="info"><i class="fa fa-info-circle"></i></span>
         <p>Select from full selection of Suites, Jackets, Shirts and much more to <br>get your best look</p>
     </li>
     <li class="first-1">
         <h4>CUSTOMIZE</h4>
     <span class="info" id="text-update"><i class="fa fa-info-circle"></i></span>
         <p>You may customize every detail of your garment and we will make exactly how you want it. You can
         customize Buttons, Monogram, Lining, Pant style etc.</p>
     </li>
 </div>

于 2021-02-27T10:09:27.050 回答
0

您可以使用文档范围的处理程序（又名事件委托）。

在片段中：单击会从包含它的所有元素中i.fa删除.active。接下来它添加.active到包含 的段落 ( p)li中i.fa。另请参阅片段中的注释。

document.addEventListener("click", setActive);

function setActive(evt) {
  const origin = evt.target;
  // only do things if the click originates from the i.fa element
  if (origin.closest("i.fa")) {
    document.querySelectorAll(".active").forEach(p => p.classList.remove("active"));
    //                        ^ remove .active class from all [element].active 
    //                          in the document
    origin.closest("li")
    //     ^ retrieve parent li
      .querySelector("p").classList.add("active");
    //                ^ add .active to the p within the containing li
    
  }
}
.active {
  color: orange;
}

.active:after {
  content: " => I AM ACTIVE!";
}

.fa:before {
  content: "[DUMMY .fa .fa-info-circle TO CLICK]";
  cursor: pointer;
}

li {
  list-style-type: none;
}
<div id="otherele" class="m-design">
  <li class="first-1">
    <h4>CHOOSE YOUR STYLE</h4>
    <span class="info">
    <i class="fa fa-info-circle"></i></span>
    <p>
      Select from full selection of Suites, Jackets, Shirts and much more to
      <br>get your best look
    </p>
  </li>
  <li class="first-1">
    <h4>CUSTOMIZE</h4>
    <span class="info" id="text-update">
    <i class="fa fa-info-circle"></i></span>
    <p>
      You may customize every detail of your garment and we will 
      make exactly how you want it. You can customize Buttons,
      Monogram, Lining, Pant style etc.
    </p>
  </li>
</div>

于 2021-02-27T09:55:14.320 回答