Question

我正在Unbounce工作。我希望隐藏微调器的gif，但在用户单击按钮时显示。我有一个标记为#lp-pom-button-279的按钮和一个标记为#lp-pom-image-288

的图像

我尝试使用JS和CSS隐藏/显示gif，但由于某些原因，我只能看到它完全隐藏或完全显示-单击时不会加载。

<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

您正在使用错误的ID隐藏微调框。

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

Answer 2

您无需使用Ajax即可简单地隐藏图像。首先，您必须隐藏图片，然后单击按钮即可显示它。

您可以使用jQuery函数hide() / show()解决此问题，也可以使用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 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>

需要在单击按钮时显示gif

3 个答案: