按类名获取元素，onclick 为两个元素提供新类答案

【问题标题】：Got element by classname, onclick give new classes for two elements按类名获取元素，onclick 为两个元素提供新类
【发布时间】：2021-04-28 23:40:45
【问题描述】：

我有两个元素。其中一个我想通过课得到。单击该元素时，我想为这两个元素提供新类，或者再次单击时，删除这些类。没有给出任何问题，新课程只是没有出现。

编辑： 渲染的 HTML 和 Child Themes 函数.php 太长，无法在此处发布，但它们在 https://github.com/iidis/stackoverflow

CodeSnippets 中的钩子（WordPress 插件在钩子中添加 sn-ps）

<?php

add_action( 'wp_head', function () { ?>
<script></script>

<?php });

JavaScript


    // Runs before the elements are added to the DOM 
    window.addEventListener('DOMContentLoaded', () => {

        // Another element I want to give new class when the element is clicked
        var anotherElement = document.getElementById("onlyonmobilesearch");
        
        // Finds elements with class "menu-toggle", makes a NodeList. 
        // Gives eventlistener for every element on the list.

        document.querySelectorAll(".menu-toggle")
        .forEach((element) =>
        element.addEventListener("click", function(){

            // When clicked, if element does not have the wanted class already, 
            // give classes for both elements.
             if ( !element.classList.contains("teststyle") ) {
                     element.classList.add("teststyle");
                    anotherElement.classList.add("teststyle2");
                
            // If has the class, removes the class
            } else {
              element.classList.remove("teststyle");
                anotherElement.classList.remove("teststyle2");
              } }                       
        ));
});

CSS


.teststyle{
  color: red;
background:red;
}
    
.teststyle2 {
  color: black;
background:black;
}

渲染的 HTML（如果我理解渲染正确的话）。从我页面的源代码中，我获取了在本期中对我来说很重要的内容。

<!DOCTYPE html>
<html lang="fi">
<head>
// here goes all metainfo I wont write here

// Loads stylesheets, for example these ones

<link rel='stylesheet' id='generate-child-css' href='http://...' media='all' />
<style id='generate-navigation-branding-inline-css'>
@media (max-width: 1024px){.site-header, #site-navigation, #sticky-navigation{display:none !important;opacity:0.0;}#mobile-header{display:block !important;width:100% !important;}#mobile-header .main-nav > ul{display:none;}#mobile-header.toggled .main-nav > ul, #mobile-header .menu-toggle, #mobile-header .mobile-bar-items{display:block;}#mobile-header .main-nav{-ms-flex:0 0 100%;flex:0 0 100%;-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4;}}.main-navigation.has-branding .inside-navigation.grid-container, .main-navigation.has-branding.grid-container .inside-navigation:not(.grid-container){padding:0px 40px 0px 60px;}.main-navigation.has-branding:not(.grid-container) .inside-navigation:not(.grid-container) .navigation-branding{margin-left:10px;}.navigation-branding img, .site-logo.mobile-header-logo img{height:60px;width:auto;}.navigation-branding .main-title{line-height:60px;}@media (max-width: 1024px){.main-navigation.has-branding.nav-align-center .menu-bar-items, .main-navigation.has-sticky-branding.navigation-stick.nav-align-center .menu-bar-items{margin-left:auto;}.navigation-branding{margin-right:auto;margin-left:10px;}.navigation-branding .main-title, .mobile-header-navigation .site-logo{margin-left:10px;}.main-navigation.has-branding .inside-navigation.grid-container{padding:0px;}.navigation-branding img, .site-logo.mobile-header-logo{height:65px;}.navigation-branding .main-title{line-height:65px;}}
</style>

<script>

<style>

//some styles for "Other Element"

 .mobilesearch { // styles }
    
.toggled .inside-navigation #onlyonmobilesearch.mobilesearch { // styles }
    
#onlyonmobilesearch.mobilesearch > label > input { // styles }
    
.search-submit-mobile { //styles }

.search-submit-mobile:hover, .search-submit-mobile:focus, .search-submit-mobile:active{ // styles }

@media(min-width:1024px){ #onlyonmobilesearch{display:none;}
}

</style>

// Here I got JavaScript written above.

 </script>

</script>
<style> 
// Here I fot CSS written above
   </style>
<script>

( function() {function wpforms_js_error_loading() { if ( typeof window.wpforms !== 'undefined' ) {return;}var forms = document.querySelectorAll( '.wpforms-form' );if ( ! forms.length ) {return;} 
var error = document.createElement( 'div' );
error.classList.add( 'wpforms-error-container' );error.innerHTML = 'Heads up! WPForms has detected an issue with JavaScript on this page. JavaScript is required for this form to work properly, so this form may not work as expected. See our <a href="https://wpforms.com/docs/getting-support-wpforms/" target="_blank" rel="noopener noreferrer">troubleshooting guide</a> to learn more or contact support.<p>This message is only displayed to site administrators.</p>';

                    forms.forEach(function(form){if ( ! form.querySelector( '.wpforms-error-container' ) ) {form.insertBefore( error.cloneNode( true ), form.firstChild );}} );};
if ( document.readyState === 'loading' ) {
document.addEventListener( 'DOMContentLoaded', wpforms_js_error_loading );} else {wpforms_js_error_loading();}}() );

</head>

<body>

</ul></div><div class="menu-bar-items"><style>
// some styles for "Another Element"

.toggled .inside-navigation #onlyonmobilesearch.mobilesearch {//styles}

#onlyonmobilesearch.mobilesearch > label > input {//styles}
</style>

<form id="onlyonmobilesearch" method="get" class="mobilesearch" action="http://localhost:8888/wordpress/"><span id="hakuteksti" aria-hidden="true">Hae sivustolta:</span>

/////////////////////////////////////
//for some reason this one is douple!!
/////////////////////////////////////

</ul></div><div class="menu-bar-items"><style>
// some styles for "Another Element"

.toggled .inside-navigation #onlyonmobilesearch.mobilesearch {//styles}

#onlyonmobilesearch.mobilesearch > label > input {//styles}
</style>

<form id="onlyonmobilesearch" method="get" class="mobilesearch" action="http://localhost:8888/wordpress/"><span id="hakuteksti" aria-hidden="true">Hae sivustolta:</span>

</body>

所以，基本上我添加了一个事件监听器以在 DOM 中运行。然后我通过 ID 得到了“另一个元素”。我用我想要的类制作了一个带有元素的 NodeList。然后我为列表中的所有元素提供了事件监听器。我制作了 onclick 函数，如果它不存在则提供新类，如果它已经存在则删除。

任何线索，为什么这个不起作用？（它是为 WordPress 代码片段制作的。）

【问题讨论】：

请编辑您的问题并包含 渲染的 HTML、CSS 和 JavaScript，以便我们可以全面测试您的代码。
修改后，您仍然没有添加相关的 HTML。我们需要所有相关代码才能为您提供帮助。
对不起，我的母语不是英语，也没有编码经验。我试图谷歌什么是呈现的 HTML，但没有得到它，但明天会尝试。我也意识到这个适用于“元素”，只有“另一个元素”不起作用。
我迅速将您的 JavaScript 代码提取到一个代码笔中，并使用一系列简单的 HTML 元素来测试您的东西。坦率地说，代码似乎按照它建议的方式工作。当单击任何.menu-toggle 并且.menu-toggle 接收.teststyle 类时，将出现#onlyonmobilesearch 的类。再次单击时，#onlyonmobilesearch 和 .menu-toggle 中的颜色都将被删除。最有可能的是，您的 HTML 是问题所在。要么，要么你需要更好地解释你希望你的实现如何工作。 codepen.io/FarizF/pen/rNjRKra
这只是意味着我们需要您查看发送到浏览器的代码并包含 HTML 部分。

标签： javascript css wordpress event-handling

【解决方案1】：

由于某种原因，这个有效。我按类而不是 id 获得了这两个元素。在 HTML 中，另一个元素显示了两次，因此可能有问题。

add_action( 'wp_head', function () { ?>

  <script>
      
    window.addEventListener('DOMContentLoaded', () => {

      document.querySelectorAll(".menu-toggle")
  .forEach((element) =>
        element.addEventListener("click", function()

            { if ( !element.classList.contains("teststyle") ) {
                     element.classList.add("teststyle");
                     
                     document.querySelectorAll(".mobilesearch")
                    .forEach((element2) =>
                      element2.classList.add("teststyle2") );
                
            } else {
              element.classList.remove("teststyle");
              
                     document.querySelectorAll(".mobilesearch")
                    .forEach((element2) =>
                      element2.classList.remove("teststyle2") );
              } }                                    
        ));
}); 

</script>

【讨论】：