在类中查找等于变量的数据属性

时间:2018-01-26 21:38:02

标签: javascript

请不要jquery 我试图删除列表中的元素与foo

相同的数据ID
let foo = document.querySelector('.foo');
let list = document.querySelector('.listing-filter');
let fooId = foo.dataset.id;
let listId = list.dataset.id;

let listingFilter = () => {
    if ( typeof fooId !== 'undefined' && typeof listId !== 'undefined'){
        //This is what I cant seem to figure out
        let deleteMe = document.querySelector('.listing-filter[data-id = fooId]')

        //This should only be the data-id in list that changes not in el1
        deleteMe.setAttribute('data-id', 'hidden')
     }
}

然后在css中我可以选择它[data-id ="隐藏"]并隐藏元素。

我似乎无法弄清楚如何在列表中选择与foo具有相同数据ID的列表元素,然后对其进行操作。

3 个答案:

答案 0 :(得分:0)

document.querySelector('.listing-filter[data-id="fooId"]')

您可以尝试更新查询选择器字符串吗?

答案 1 :(得分:0)

你几乎就在那里:

margin-top: 0

此外,您不需要let deleteMe = document.querySelector('.listing-filter [data-id="' + fooId + '"]');

.foo

答案 2 :(得分:0)

您已直接输入fooId,因此它会查找data-id="fooId"而不是您定义的fooId值的内容。尝试将变量添加到字符串中:

let deleteMe = document.querySelector(`.listing-filter[data-id=${fooId}]`)