Javascript div類檢查onclick

Question

我正在嘗試檢查onclick是否div將兩個不同的類之一添加到主div類中，如果沒有，請返回警報。 這是所有可能的div的示例：

<div class="mainclass class1"></div>
<div class="mainclass class2"></div>
<div class="mainclass"></div>

如果我嘗試使用JS這樣的類來檢查類是否存在，

$('.mainclass').click(function () {
    var check1 = $(this).hasClass('class1');
    var check2 = $(this).hasClass('class2');
    if(check1 == false || check2 == false)
                { 
                    alert("Hey, you are clicking empty field!")
                }
});

即使我單擊前兩個div，系統也會始終返回警報。 有什么方法可以使用JS進行適當的檢查嗎？

Answer 1

在選擇要跟蹤的對象時，更容易應用以下限制：

$('.mainclass').not('.class1, .class2').click(function () {
  alert("Hey, you are clicking empty field!")
});

如果確實確實動態添加/刪除了這些類，請再次直接聲明您的意圖：

$('.mainclass').click(function() {
    if ( $(this).is(':not(.class1, .class2)') ) { 
        alert("Hey, you are clicking empty field!");
    }
});

Answer 2

將運算符更改為&&而不是|| ：

$('.mainclass').click(function () {
var check1 = $(this).hasClass('class1');
var check2 = $(this).hasClass('class2');
if(check1 == false && check2 == false)
            { 
                alert("Hey, you are clicking empty field!")
            }
});

工作演示

Answer 3

您在這里需要AND &&運算符，而不是OR || ：

if(check1 == false && check2 == false)

小提琴演示

Answer 4

像這樣檢查

$('.mainclass').click(function () {
    var check1 = $(this).hasClass('class1');
    var check2 = $(this).hasClass('class2');
    if(!check1 && !check2 )
                { 
                    alert("Hey, you are clicking empty field!")
                }
});

其他方式

$('.mainclass').click(function () {

    if(!$(this).hasClass('class1') && !$(this).hasClass('class2'))
         { 
            alert("Hey, you are clicking empty field!")
         }
 });