时间戳

首页 > 解决方案 > wordpress 自定义主题 - getelementbyid 访问 header.php 中的元素返回 null

javascript - wordpress 自定义主题 - getelementbyid 访问 header.php 中的元素返回 null

问题描述

我是 Wordpress 开发的新手。我正在尝试添加一个汉堡菜单下拉菜单，但是由于某种原因，尝试通过 getElementbyID 调用要单击的图标会返回 null。js 文件中的其他代码正在注册，所以我相信我的编码正确。我不确定 DOM 树的某些方面或我缺少的 wordpress 主题的编码。任何帮助是极大的赞赏。

在 header.php 中

<div id="nav_icon_burger_x"> 
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>

在 app.js 中

const mobileNavIcon = document.getElementById('nav_icon_burger_x');

mobileNavIcon.addEventListener('click', function () {
    mobileNavIcon.toggleClass('open');
});

在functions.php中

function include_js_files() {
    wp_enqueue_script('idm250-js', get_template_directory_uri() . '/dist/scripts/app.js');
}

// When WP performs this action, call our function
add_action('wp_enqueue_scripts', 'include_js_files');

标签： javascriptphphtmlwordpress-theming

解决方案

首先拯救我的是向菜单按钮添加一个简单的 onclick 属性。像这样：

<div onclick="toggleFunction(event)"> 
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

然后你把你的功能放在任何地方：

function toggleFunction(e){          
  e.target.classList.toggle('open');
}

您的代码也存在问题，toggleClass 来自 jQuery，因此您需要一个 Jquery 元素来切换其类，您可以在 vanilla 上使用 classList.toggle('yourClass')

如果您需要为此使用 jQuery，请使用如下函数：

$('#nav_icon_burger_x').toggleClass('open')

在您的 addEventListener 函数中

您可以更进一步，从 jQuery 中进行点击事件，如下所示：

$('#nav_icon_burger_x').click( function() {
  $(this).toggleClass('open');
});


function toggleFunction(e){          
  e.target.classList.toggle('open');
}
div{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:30px;
  height:36px;
  cursor:pointer;
}
span{
  background-color:black;
  height:10px;
  width:30px;
  margin-bottom:2px;
  
}
.open{
  background-color:blue;
}
<div onclick="toggleFunction(event)"> 
      <span></span>
      <span></span>
      <span></span>
</div>

希望这可以帮助您实现目标。

推荐阅读