如果自定义属性具有特定值jquery，则更改元素css

Question

为什么即使使用if语句，css也适用于该类的所有元素？ 有什么不对吗？

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'
        });
    }

Answer 1

如果if语句的计算结果为true，则正在使用的选择器range = ws.Range("A1:A3,AE15:AE9,C4:C7") maxRow = range.EntireRow.Address(False, False).Split(",:".ToCharArray()).Select(Function(n) Integer.Parse(n)).Max() ' 1:3,9:15,4:7 maxCol = range.EntireColumn.Address(False, False).Split(",:".ToCharArray()).Select(Function(s) s.PadLeft(3)).Max().Trim() ' 1:3,9:15,4:7 将使用该类定位所有元素并将适当的属性应用于它们：

.simply-drop-down

考虑属性选择器

相反，您可能需要考虑使用the attribute equals selector仅针对具有该特定属性值的元素：

// This will target every element with the class 'simply-drop-down'
$('.simply-drop-menu').css({
        'top': '130px',
        'right': '21px',
        'opacity': '0',
        'pointer-events': 'none'
});

这也消除了使用if语句的需要。

示例

// 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 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'
});

Answer 2

更新

你是对的。不得不使用.attr()方法。我需要做更多的研究。

试试这样：

$('#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>

  

例如，给定以下HTML：

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>

  

以下所有jQuery代码都可以使用。

$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";

参考：

https://api.jquery.com/data/