Question

由于某些原因我不明白，OR运算符无法正常工作。

在下面的例子中，我试图用jquery创建一个悬停效果，只有当hovered元素的id不等于＆＃34; f1＆＃34;或＆＃34; c1＆＃34;

但是从提供的示例中可以看出它不起作用。有什么想法吗？

＆＃13;

$(document).on("mouseenter", ".123456", function() {
  if (this.id != 'f1' || this.id != 'c1') {
    $(this).css("background-color", "green")
    $(this).find('span').css("color", "red")
  }
});
$(document).on("mouseleave", ".123456", function() {
  if ((this.id != 'f1') || (this.id != 'c1')) {
    $(this).css("background-color", "white")
    $(this).find('span').css("color", "black")
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="a1" class="123456">
  <span>a1</span>
</div>

<div id="f1" class="123456">
  <span>f1</span>
</div>

＆＃13;

Answer 1

您可以选择logical AND &&，因为您需要排除这两者，而不仅仅是一个。

$(document).on("mouseenter", ".123456", function() {
  if (this.id != 'f1' && this.id != 'c1') {
    $(this).css("background-color", "green")
    $(this).find('span').css("color", "red")
  }
});
$(document).on("mouseleave", ".123456", function() {
  if (this.id != 'f1' && this.id != 'c1') {
    $(this).css("background-color", "white")
    $(this).find('span').css("color", "black")
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="a1" class="123456">
  <span>a1</span>
</div>

<div id="f1" class="123456">
  <span>f1</span>
</div>

Answer 2

在这种情况下，您应该使用&&而不是||，因为它将评估其他案例的true，因此{{1}对于整个表达式，总是。

将您的逻辑视为true。由于DeMorgan的定律，简化为!( (id == A) || (id == B) )。

Answer 3

将或更改为和。

$(document).on("mouseenter", ".123456", function() {
  if (this.id != 'f1' && this.id != 'c1') {
    $(this).css("background-color", "green")
    $(this).find('span').css("color", "red")
  }
});
$(document).on("mouseleave", ".123456", function() {
  if ((this.id != 'f1') && (this.id != 'c1')) {
    $(this).css("background-color", "white")
    $(this).find('span').css("color", "black")
  }
});

这样，悬停效果只会应用于id不是c1的元素和id不是f1的元素。

Answer 4

问题是你应该使用逻辑AND（&&），而不是逻辑OR（||）。

$(document).on("mouseenter", ".123456", function() {
  if (this.id != 'f1' && this.id != 'c1') {
    $(this).css("background-color", "green")
    $(this).find('span').css("color", "red")
  }
});
$(document).on("mouseleave", ".123456", function() {
  if ((this.id != 'f1') || (this.id != 'c1')) {
    $(this).css("background-color", "white")
    $(this).find('span').css("color", "black")
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="a1" class="123456">
  <span>a1</span>
</div>

<div id="f1" class="123456">
  <span>f1</span>
</div>

此外，只使用CSS而不使用JavaScript，您可以获得完全相同的结果。这不仅会更简单，而且效率也会提高。

.hover:not(#f1):hover:not(#c1):hover {
  background-color:green;
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="a1" class="hover">
  <span>a1</span>
</div>

<div id="f1" class="hover">
  <span>f1</span>
</div>

我无法让OR运算符正常工作

4 个答案: