如何在js中通过其值隐藏按钮？

Question

如何按其值隐藏按钮？例子 ：<button class="mat-raised-button mat-primary" color="primary" mat-raised-button="">    <span class="mat-button-wrapper">RESET</span>    <div class="mat-button-ripple mat-ripple" matripple=""></div>    <div class="mat-button-focus-overlay"></div></button>其实我想隐藏这个有RESET的按钮。但我无法在其类的帮助下隐藏它，因为同一个类正在其他按钮中使用。如果尝试使用类名隐藏所有具有相同类的按钮将被隐藏。有什么帮助吗？

Answer 1

你的问题不清楚。你是这个意思吗？

var elements = document.getElementsByClassName("mat-button-wrapper");

for(var i = 0; i < elements.length; i++) {

  elements[i].style.display = "none";

  console.log("Hidden: " + elements[i]);

}

Answer 2

如果您想隐藏此按钮：

<button class="mat-raised-button mat-primary" color="primary" mat-raised-button="">

    <span class="mat-button-wrapper">RESET</span>

    <div class="mat-button-ripple mat-ripple" matripple=""></div>

    <div class="mat-button-focus-overlay"></div>

</button>

因为它包含这个词 RESET

您可以使用以下内容：

// Get all relevant buttons

let myButtons = [...document.getElementsByClassName('mat-raised-button')];

// Cycle through buttons

myButtons.forEach((button) => {

  let matButtonWrapper = button.getElementsByClassName('mat-button-wrapper')[0];

  // Execute actions according to the mat-button-wrapper text

  switch(matButtonWrapper.textContent) {

    case ('RESET') : button.style.opacity = '0'; break;

    // case ('Another word here') : actions here; break;

    // case ('Another word here') : actions here; break;

    // case ('Another word here') : actions here; break;

    // case ('Another word here') : actions here; break;

  }

});

Answer 3

首先你的问题不清楚，我不能很好地理解你到底想做什么以及你将如何做。如果您使用 JS ，请使用关键字 'this' ， 'this' 将作用于按钮触发事件的当前范围。

例子：

document.querySelector('button class').on('click', function() { 

   this.el.style.display = 'none'

});

当然，在事件函数中，您可以获取单击按钮的值并检查它的值。

或者您可以将 clicked el 传递给函数：

document.querySelector('button class').on('click', function(el) { 

           var value = el.value;

           if(value === 'something') {

               el.style.display = 'none'

           }

        });