时间戳

首页 > 解决方案 > Materialize CSS Dropdown 更新 DOM innerText

javascript - Materialize CSS Dropdown 更新 DOM innerText

问题描述

我有一个用 Materialize CSS 制作的下拉菜单。当用户单击它时，我试图更改“按钮”上的文本，但由于某种原因它不会更新 DOM。

var changeText;
changeText = function(){
  if(this.innerText === 'test'){
    this.innerText = 'success';
  } else {
    this.innerText = 'test';
  }
  
  $('.dropdown-trigger').dropdown({
    alignment: 'right',
    constrainWidth: false,
    coverTrigger: false
  });
  
  console.log(this.innerText);
};

$( document ).ready(function() {

  $('.dropdown-trigger').dropdown({
    alignment: 'right',
    constrainWidth: false,
    coverTrigger: false
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>

<!-- Dropdown Trigger -->
<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>

<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
  <li><a href="#" onclick="changeText()">test</a></li>
</ul>

我尝试重新初始化下拉触发器，希望能更新 DOM，但它没有效果。尽管您可以在控制台日志中看到，innerText 已按预期更改。

标签： javascriptmaterialize

解决方案

this这里指的是窗口对象。所以试试event.target

var changeText;
changeText = function(){
  if(event.target.innerText === 'test'){
    event.target.innerText = 'success';
  } else {
    event.target.innerText = 'test';
  }  
  console.log(this.innerText);
};

$( document ).ready(function() {

  $('.dropdown-trigger').dropdown({
    alignment: 'right',
    constrainWidth: false,
    coverTrigger: false
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>

<!-- Dropdown Trigger -->
<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>

<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
  <li><a href="#" onclick="changeText()">test</a></li>
</ul>

推荐阅读