Why the css applies to all the elements with that class even with that if statement ? Is something wrong?
if( $( '.simply-drop-menu' ).attr( 'data-type-simply-menu' ) == 'user_friends-request' ) {
$( '.simply-drop-menu' ).css({
'top': '130px',
'right': '21px',
'opacity': '0',
'pointer-events': 'none'
});
}
If the if-statement evaluates as true, the selector that is being used .simply-drop-down will target all elements with that class and apply the appropriate properties to them :
// This will target every element with the class 'simply-drop-down'
$('.simply-drop-menu').css({
'top': '130px',
'right': '21px',
'opacity': '0',
'pointer-events': 'none'
});
Consider an Attribute Selector
Instead you might want to consider using the attribute equals selector to only target those elements with that specific attribute value :
// This will target all elements with the class 'simply-drop-down' that have a data
// attribute of 'data-type-simply-menu' with a value of 'user_friends-request'
$('.simply-drop-menu[data-type-simply-menu="user_friends-request"]').css({
'top': '130px',
'right': '21px',
'opacity': '0',
'pointer-events': 'none'
});
This also eliminates the need for an if-statement to be used as well.
Example
// This will only target your drop down elements with the proper attribute value
$('.simply-drop-menu[data-type-simply-menu="user_friends-request"]').css({
'color': 'red'
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre>Notice only the simply-drop-down class with the appropriate data attribute is red.</pre>
<div class='simply-drop-menu' data-type-simply-menu="user_friends-request">class='simply-drop-menu' data-type-simply-menu="user_friends-request"</div>
<div class='simply-drop-menu'>class='simply-drop-menu'</div>
<div data-type-simply-menu="user_friends-request">data-type-simply-menu="user_friends-request"</div>
<div class='simply-drop-menu' data-type-simply-menu="user_friends-foo">class='simply-drop-menu' data-type-simply-menu="user_friends-foo"</div>
css() function on those elements.
data-* attribute is being used, but you could use an id, title or whatever you would like. Have you seen the example? It clearly demonstrates how this works. Consider posting sone of your markup if you want a more specific example.Update:
You're right. Had to use the .attr() method. More study needed, I s'pose.
Try it like this:
$('#checkit').click(function(){
alert( $('.simply-drop-menu').attr('data-simplyMenu') );
if ($('.simply-drop-menu').attr('data-simplyMenu') == 'user_friends-request') {
//disabled opacity because you cannot see it work
$('.simply-drop-menu').css({'top': '130px','right': '21px','opacity': '','pointer-events': 'none'});
$('.simply-drop-menu').css('background','yellow');
}
});
1.simply-drop-menu{position:relative;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="simply-drop-menu" data-simplyMenu="user_friends-request" type="text" />
<button id="checkit">Check It</button>For example, given the following HTML:
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
All of the following jQuery code will work.
$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";
Reference:
$( '.simply-drop-menu' ).data('type-simply-menu'). This has nothing to do with your problem -- just something I noticed.