Javascript 按类名获取元素，单击为两个元素提供新类_Javascript_Css_Wordpress_Event Handling

Javascript 按类名获取元素，单击为两个元素提供新类

javascript css wordpress

Javascript 按类名获取元素，单击为两个元素提供新类,javascript,css,wordpress,event-handling,Javascript,Css,Wordpress,Event Handling,我有两个要素。我想在课堂上得到其中一个。单击元素时，我希望为这两个元素提供新类，或者再次单击时，删除这些类。没有给出任何问题，新的类只是没有出现编辑：呈现的HTML和Child-Themes functions.php太长，无法在此处发布，但它们位于代码片段中的钩子（WordPress插件用于在钩子中添加代码片段） CSS 呈现HTML（如果我正确理解呈现）。从我网页的源代码中，我得到了在本期中对我来说很重要的东西 <!DOCTYPE html> <html lang=&

我有两个要素。我想在课堂上得到其中一个。单击元素时，我希望为这两个元素提供新类，或者再次单击时，删除这些类。没有给出任何问题，新的类只是没有出现

编辑： 呈现的HTML和Child-Themes functions.php太长，无法在此处发布，但它们位于

代码片段中的钩子（WordPress插件用于在钩子中添加代码片段）

CSS

呈现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>


//这里是所有我不会在这里写的元信息
//加载样式表，例如这些样式表
@媒体（最大宽度：1024px）{.站点标题，{站点导航，{粘性导航{显示：无！重要；不透明度：0.0；}移动标题{显示：块！重要；宽度：100%！重要；}移动标题。主导航>ul{显示：无；}移动标题。切换。主导航>ul，{移动标题。菜单切换，{移动标题。移动栏项目{显示：块；}#mobile header.main nav{-ms flex:0 0 100%；flex:0 0 100%；-webkit box序号组：5；-ms flex顺序：4；顺序：4；}}}.main-navigation.has-branding.inside-navigation.grid-container.main-navigation.has-branding.grid-container.内部导航：not（.grid container）{padding:0px 40px 0px 0px 60px；}.main导航.has-branding.has-navigation:not（.gr.内部导航：非（.grid container）.导航标记{左边距：10px；}.导航标记img，.site-logo.mobile-header-logo img{高度：60px；宽度：auto；}.导航标记.主标题{行高：60px；}@media（最大宽度：1024px）{.main-navigation.has-branding.nav-align-center.菜单栏项，.main-navigation.has-sticky-branding.navigation-stick.nav-align-center.菜单栏项{margin left:auto；}.navigation-branding{margin right:auto；margin left:10px；}.navigation-branding.main-navigation-title.mobile-header-navigation.site徽标.main-navigation.has-branding.inside-navigation.grid容器{padding:0px；}.navigation branding img、.site logo.mobile header logo{height:65px；}.navigation branding.main标题{lineheight:65px；}}
//“其他元素”的一些样式
.mobilesearch{//styles}
.toggled.inside navigation#onlyonmobilesearch.mobilesearch{//styles}
#onlyonmobilesearch.mobilesearch>label>input{//styles}
.search提交手机{//styles}
.search submit mobile:悬停，.search submit mobile:焦点，.search submit mobile:活动{//styles}
@媒体（最小宽度：1024px）{仅限移动搜索{显示：无；}
}
//这里我得到了上面写的JavaScript。
//在这里我看到了上面写的CSS
（function（）{function wpforms_js_error_load（）{if（typeof window.wpforms！='undefined'）{return；}var forms=document.querySelectorAll（'.wpforms'）；if（！forms.length）{return；}
var error=document.createElement（'div'）；
error.classList.add（'wpforms error container'）；error.innerHTML='Heads up！wpforms在此页面上检测到JavaScript问题。此表单需要JavaScript才能正常工作，因此此表单可能无法按预期工作。请参阅我们的以了解更多信息或与支持部门联系。此消息仅向站点管理员显示。；
forms.forEach（函数（form）{if（！form.querySelector（'.wpforms error container'））{form.insertBefore（error.cloneNode（true），form.firstChild）；}}；
如果（document.readyState==='loading'）{
addEventListener（'DOMContentLoaded'，wpforms_js_error_loading）；}else{wpforms_js_error_loading（）；}}（））；

//“另一个元素”的一些样式
.toggled.inside navigation#onlyonmobilesearch.mobilesearch{//styles}
#onlyonmobilesearch.mobilesearch>label>input{//styles}
Hae sivustolta：
/////////////////////////////////////
//由于某种原因，这是双重的！！
/////////////////////////////////////

//“另一个元素”的一些样式
.toggled.inside navigation#onlyonmobilesearch.mobilesearch{//styles}
#onlyonmobilesearch.mobilesearch>label>input{//styles}
Hae sivustolta：

因此，基本上我添加了一个eventlistener在DOM中运行。然后我得到了ID为的“另一个元素”。我用我想要的类的元素制作了一个节点列表。然后我给列表中的所有元素提供了eventlistener。我制作了onclick函数，如果新类不存在，则提供新类，如果它已经存在，则删除它

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

出于某种原因，这个可以起作用。我按类而不是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>

add_动作（'wp_head'，函数（）{？>
window.addEventListener（'DOMContentLoaded'，（）=>{
document.querySelectorAll（“菜单切换”）
.forEach（（元素）=>
元素。addEventListener（“单击”，函数（）
{if（！element.classList.contains（“teststyle”））{
element.classList.add（“teststyle”）；
document.querySelectorAll（“.mobilesearch”）
.forEach（（元素2）=>
element2.classList.add（“teststyle2”）；
}否则{
element.classList.remove（“teststyle”）；
document.querySelectorAll（“.mobilesearch”）
.forEach（（元素2）=>
element2.classList.remove（“teststyle2”）；
} }                                    
));
});

请编辑您的问题，并包括呈现的HTML、CSS和JavaScript，以便我们能够全面测试您的代码。编辑后，您仍然没有添加相关的HTML。我们需要所有相关的代码来帮助您。很抱歉，我不是英语母语，也没有编码经验。我尝试用谷歌搜索呈现的HTML内容，但没有我不明白，但明天会试试。我还意识到这一款与“元素”配合使用，


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

<!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>

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>