Selecting by data-attr (JQuery)

Question

I am trying to select a div by data-attr and then show or hide it.

For example: $('div.product-details') where attr is 1 toggle .show() / .hide().

Can anyone show me how to do this? I can't seem to find it anywhere.

Many thanks

Answer 1

You can use attribute value selector to get element by their attribute value:

var divObj = $('div.product-details[data-attr="1"]');

Answer 2

JavaScript:

You can use document.querySelector(selector) to do this:

Fiddle

var elem = document.querySelector('div[data-name="alex"]');
elem.onmouseover = function() {
    this.style.opacity = '0';
}
elem.onmouseleave = function() {
    this.style.opacity = '1';
}

jQuery:

Fiddle

$('[data-name="alex"]').mouseover(function() {
    $(this).css({'opacity': '0'});
}).mouseleave(function() {
    $(this).css({'opacity': '1'});
})