Есть кнопки такого вида:
<button value="мужская" data-option="Мужская одежда" class="control">Мужская одежда</button>
<button value="женская" data-option="Женская одежда" class="control">Женская одежда</button>
<button value="разное" data-option="Разное" class="control">Разное</button>
И массив: Array['Разное', 'Женская одежда']
Как при помощи JS скрыть кнопку, если значение data-option нет в списке?
Если я правильно все понял, то один из вариантов:
$(document).ready(function(){
var arr = ['Разное','Женская одежда'];
$('button').each(function(){
var data = $(this).attr('data-option');
if (arr.indexOf(data) == -1) {
$(this).hide();
}
});
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button value="мужская" data-option="Мужская одежда" class="control">Мужская одежда</button>
<button value="женская" data-option="Женская одежда" class="control">Женская одежда</button>
<button value="разное" data-option="Разное" class="control">Разное</button>
window.addEventListener('load', () => {
/**
* @type {NodeListOF<HTMLElement>}
*/
let buttonList = document.getElementsByClassName('control')
/**
* @type {HTMLElement}
*/
let button = null
let arr = ['Разное', 'Женская одежда']
for (
button of buttonList
) {
// let include = arr.includes(button.dataset.option)
let include = -1 !== arr.indexOf(button.dataset.option)
if (!include) {
button.hidden = true
}
}
})
<button value="мужская" data-option="Мужская одежда" class="control">Мужская одежда</button>
<button value="женская" data-option="Женская одежда" class="control">Женская одежда</button>
<button value="разное" data-option="Разное" class="control">Разное</button>
Сборка персонального компьютера от Artline: умный выбор для современных пользователей