Question

我一直在尝试在我的ajax请求函数中显示和隐藏图像时遇到问题。为了清楚我要做的事情，我制作的视频不到1分钟click here。如果你在Web控制台中看到，有一个变量从“ocupado”变为“libre”，这意味着如果有一个空闲或忙碌的停车位。所以它有点工作，因为在开始时我的变量"data" = ocupado显示汽车图像，然后当它变为"data" = libre时隐藏汽车图像。当问题再次变为"data" = ocupado时，问题就开始了，因为它没有显示任何汽车图像。

这是我的ajax功能代码

<script src="js/jQuery.js"></script>
  <script type="text/javascript">
  setInterval(function(){
  $("img").error(function () {
    $(this).unbind("error").attr("src", "");
  });
  $(function ()
  {

    $.ajax({
      url: 'api.php',
      data: "",
      success: function(data)
      {
          console.log(data);
          if (data === "libre"){
          $("#slave1free").hide();
          $("#slave1busy").hide();

          }else{
          $("slave1free").show();
          $("slave1busy").show();  
          }
        }
      });
    })
  }, 1000);

    <div class="chart">
      <div class="chartimage"><img src="images/parkinglot.jpg"></div>
      <div class="image" id = "esclavo1">
        <div class "free" id = "slave1free"><img src="images/carfree.png"></div>qQ
        <div class "busy" id = "slave1busy"><img src="images/carbusy.png"></div>
      </div>

顺便说一句，carfree.png和carbusy.png是“estacionamiento libre”和“estacionamiento ocupado”旁边的视频中显示的那些图像。我把一个图像放在另一个图像的顶部，因为我打算根据数据值（“libre”或“ocupado”）显示和隐藏两个图像。

编辑：是的，我正在隐藏两者并故意展示两者，因为我想看看问题出在哪里。尽管两者同时显示或隐藏，但"data"=ocupado时会出现两个图像（一个在另一个之上）？

Answer 1

请注意，您隐藏了这两个项目，或者同时显示这两个项目......不应该是每个项目之一吗？

if (data === "libre") {
   $("#slave1free").show();
   $("#slave1busy").hide();
} else{
   $("slave1free").hide();
   $("slave1busy").show();  
}

-edit -

刚才意识到你在else

上缺少id选择器（＃）

if (data === "libre") {
   $("#slave1free").show();
   $("#slave1busy").hide();
} else{
   $("#slave1free").hide();
   $("#slave1busy").show();  
}

如何在javascript中正确显示和隐藏图像？

1 个答案: