如何在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++) {&nbsp; elements[i].style.display = "none";&nbsp; console.log("Hidden: " + elements[i]);}

Answer 2

如果您想隐藏此按钮：<button class="mat-raised-button mat-primary" color="primary" mat-raised-button="">&nbsp; &nbsp; <span class="mat-button-wrapper">RESET</span>&nbsp; &nbsp; <div class="mat-button-ripple mat-ripple" matripple=""></div>&nbsp; &nbsp; <div class="mat-button-focus-overlay"></div></button>因为它包含这个词 RESET您可以使用以下内容：// Get all relevant buttonslet myButtons = [...document.getElementsByClassName('mat-raised-button')];// Cycle through buttonsmyButtons.forEach((button) => {&nbsp; let matButtonWrapper = button.getElementsByClassName('mat-button-wrapper')[0];&nbsp; // Execute actions according to the mat-button-wrapper text&nbsp; switch(matButtonWrapper.textContent) {&nbsp; &nbsp; case ('RESET') : button.style.opacity = '0'; break;&nbsp; &nbsp; // case ('Another word here') : actions here; break;&nbsp; &nbsp; // case ('Another word here') : actions here; break;&nbsp; &nbsp; // case ('Another word here') : actions here; break;&nbsp; &nbsp; // case ('Another word here') : actions here; break;&nbsp; }});

Answer 3

首先你的问题不清楚，我不能很好地理解你到底想做什么以及你将如何做。如果您使用 JS ，请使用关键字 'this' ， 'this' 将作用于按钮触发事件的当前范围。例子：document.querySelector('button class').on('click', function() {&nbsp;&nbsp; &nbsp;this.el.style.display = 'none'});当然，在事件函数中，您可以获取单击按钮的值并检查它的值。或者您可以将 clicked el 传递给函数：document.querySelector('button class').on('click', function(el) {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var value = el.value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if(value === 'something') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;el.style.display = 'none'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; });