需要在单击按钮上显示gif

Question

我在Unbounce工作。我希望隐藏一个旋转器的gif，但是显示用户单击该按钮的时间。我有一个标记为#lp-pom-button-279的按钮和一个标记为#lp-pom-image-288的图像

我尝试使用JS和CSS来隐藏/显示gif，但出于某种原因，我只看到它隐藏或完全显示，- it没有在单击时加载。

<script>
  $('#lp-pom-button-279').click(function() {
  $('#lp-pom-image-288').show(); //<----here
  $.ajax({
    ....
    success: function(result) {
      $('#spinner').hide();  //<--- hide again
    }
  }
</script>

<style>
  #lp-pom-image-288 {
    display: none;
  }
</style>

Answer 1

您不需要使用ajax来简单地隐藏图像。首先，你必须隐藏图片和按钮点击，你显示它。

您可以使用jQuery函数隐藏()/显示()解决这个问题，也可以用jQuery css()函数更改样式。

使用hide()和show()

​

$('#picture').hide(); // hide at beginning

$('#button').click(function(){
  $('#picture').show(); // show on button click
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">Show picture</button>
<br />
<img id="picture" src="https://dummyimage.com/600x400/000/fff"/>

​

使用css()

​

$('#picture').css("display", "none"); // hide at beginning

$('#button').click(function(){
  $('#picture').css("display", "block"); // show button on click
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">Show picture</button>
<br />
<img id="picture" src="https://dummyimage.com/600x400/000/fff"/>

​

Answer 2

你在用错误的身份隐藏旋转器。

success:function(result){
       $('#lp-pom-image-288').hide();  //<--- hide again
   }

Answer 3

在id回调函数中使用的success是错误的：

​

$('#lp-pom-button-279').click(function() {
  $('#lp-pom-image-288').show(); // <- Show spinner here
  $.ajax({
    url: 'https://reqres.in/api/users',
    success: function(result) {
      $('#lp-pom-image-288').hide(); // <- Hide spinner here
    }
  });
});

#lp-pom-image-288 {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="lp-pom-button-279">Button</button>
<div id="lp-pom-image-288">Spinner</div>

​