Question

我写了下面的代码来获取输出。

$(document).ready(function(){
  if ($('.figure').css("left","702px")) {
    $('.level1').css("display", "inline-block");
  } else {
    $('.level1').css("display", "none");            
  }
});

当.figure到达left 702px时，我想要的是什么。我想显示level1图标。但现在display none尚未在702px之前应用left 1500px。这是在达到702px之前显示的level1图标。哪里不对了？请帮忙。即使我想添加更多条件，例如.figure level2 icon ToolStripMenuItems，然后显示M2。感谢。

Answer 1

您的if statement似乎不正确。这不起作用;

if ($('.figure').css("left","702px"))

您无法以设置的方式检查CSS值。上面的if语句将评估“ 设置为702px并检查是否成功... ”，这几乎总是true。尝试将其更改为以下内容;

if ($('.figure').css("left") == "702px")

<强>更新

你的评论让我意识到 - 无论如何这可能对你不起作用。这适用于完全 702px 仅。任何低于或高于的东西都会评估为假。在这种情况下，尝试与偏移进行比较（这样，你可以使用＆lt;和＆gt;当值包含'px'时，它将不起作用，因为它与.css一样）;

if ($('.figure').offset().left > 702)

Answer 2

$('.figure').css("left","702px")

这用于设置css值。在if条件内，您需要检查以匹配值。

您可以修改条件行，如下所示。

if ($('.figure').css("left") == "702px") {

您应该在添加!important display时提供inline-block，以避免样式被覆盖。

所以你的代码应该如下所示。

$(document).ready(function(){
  if ($('.figure').css("left")== "702px") {
    $('.level1').css("display", "inline-block !important");
  } else {
    $('.level1').css("display", "none !important");            
  }
});

Answer 3

这是你在vanilla javascript中的预期功能：

function checkFigureLeft() {
    var figure = document.getElementsByClassName('figure')[0];
    var level1 = document.getElementsByClassName('level1')[0];
    var figureLeft = window.getComputedStyle(figure).getPropertyValue('left');

    if (figureLeft >= '702px') {
        level1.style.display = 'inline-block';
    } 

    else {
        level1.style.display = 'none';
    }
}

Answer 4

您可以使用示例解决方案

＆＃13;

$('button').click(function(){
  $('div').css('left', '100px');
  
  if($('div').css('left') == '100px'){
    $('span').css('display', 'block');
  }
});

＆＃13;

span {
  display: none;
}

div {
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

<button>Click ME!!!</button>

<span>Clicked ME!!!</span>

＆＃13;

希望这会对你有所帮助。

如果jQuery中的css条件不起作用

4 个答案: