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

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

示例：

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

   this.el.style.display = 'none'

});

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

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

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

           var value = el.value;

           if(value === 'something') {
               el.style.display = 'none'
           }
        });

Answer 2

您的问题不是直截了当的，您要隐藏值为“ RESET”的按钮吗？

Answer 3

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

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 4

如果您想隐藏此按钮：

<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;
  }

});

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

4 个答案: