Материализация CSS Dropdown обновление DOM innerText - PullRequest
Новая
       7

Материализация CSS Dropdown обновление DOM innerText

1 голос
/ 19 сентября 2019

У меня есть выпадающее меню, созданное с помощью Materialise 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, но это не имеет никакого эффекта.Внутренний текст изменяется, как и ожидалось, хотя, как вы можете видеть в журнале консоли.

Ответы [ 3 ]

2 голосов
/ 19 сентября 2019

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>
1 голос
/ 19 сентября 2019

this относится к window, обновить innerText из $('.dropdown-trigger')[0]: 

var changeText;
changeText = function(e) {
  if (e.innerText === 'test') {
    $('.dropdown-trigger')[0].innerText = 'success';
  } else {
    $('.dropdown-trigger')[0].innerText = 'test';
  }

  $('.dropdown-trigger').dropdown({
    alignment: 'right',
    constrainWidth: false,
    coverTrigger: false
  });
};

$(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(this)">test</a></li>
  <li><a href="#" onclick="changeText(this)">test 2</a></li>
</ul>
1 голос
/ 19 сентября 2019

Для ссылки на элемент необходимо передать ссылку, как показано ниже 

var changeText;
changeText = function(ele){
  if(ele.innerText === 'test'){
    ele.innerText = 'success';
  } else {
    ele.innerText = 'test';
  }

  $('.dropdown-trigger').dropdown({
    alignment: 'right',
    constrainWidth: false,
    coverTrigger: false
  });

};

$( 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(this)">test</a></li>
</ul>
...