代码之家 › 专栏 › 技术社区 › xendi

Javascript/CSS Show/Hide有时不起作用

css jquery javascript

xendi · 技术社区 · 6 年前

我有一个加载程序gif,我正试图显示/隐藏ajax调用以指示进度。奇怪的是,它只为一个功能工作,而不是为另一个功能工作。

function showThis(id) {

  document.getElementById(id).style.visibility = "visible";
}

function hideThis(id) {
  document.getElementById(id).style.visibility = "hidden";
}

jQuery(function() {
  jQuery("#testKey").click(function(event) {
    // NEXT LINE DOESN'T WORK
    showThis('loader2');
    jQuery.ajax({
      type: "POST",
      dataType: "json",
      url: "/api/?action=testKey",
      data: {
        exchange: jQuery('#setExchange').val(),
        key: jQuery('#setKey').val(),
        secret: jQuery('#setSecret').val()
      },
      success: function(data) {
        if (!data.error) {
          if (data.keyValid == true) {
            alert("API Key is valid");
          } else {
            alert("Invalid key and/or secret.");
          }
        } else {
          alert("Error: " + data.errorMsg);
        }
      }
    });
    hideThis('loader2');
    return false;
  });
});

jQuery(function() {
  jQuery('#setSave').click(function(event) {
    // THIS WORKS
    showThis("loader2");
    jQuery.post(
      '/api/?action=bcSaveSettings', {
        exchange: jQuery('#setExchange').val(),
        key: jQuery('#setKey').val(),
        secret: jQuery('#setSecret').val(),
      },
      function() {
        var newKey = jQuery('#setKey').val();
        var newSecret = jQuery('#setSecret').val();
        var exchangeNum = jQuery('#setExchange').val();
        var exchangeName = jQuery("#setExchange option:selected").text();
        jQuery("#setExchange option:selected").attr('dat', newKey);
        jQuery("#setExchange option:selected").attr('dat2', newSecret);
        if (jQuery("#depExchange option[value='" + exchangeNum + "']").length > 0 && newKey.length < 1 && newSecret.length < 1) {
          jQuery("#depExchange option[value='" + exchangeNum + "']").remove();
        } else if (jQuery("#depExchange option[value='" + exchangeNum + "']").length < 1 && newKey.length > 0 && newSecret.length > 0) {
          jQuery("#depExchange").append(jQuery('<option>', {
            value: exchangeNum,
            text: exchangeName
          }));
        }
        hideThis("loader2");
        alert("Settings saved");
      }
    );
    event.preventDefault();
  });
});

#loader1 {
  background: #ecf0f1;
  position: relative;
  height: 100%;
  visibility: hidden;
}

#loader2 {
  background: #ecf0f1;
  position: relative;
  height: 100%;
  visibility: hidden;
}

.dot {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #2ecc71;
  border-radius: 100%;
  animation-duration: 1s;
  animation-name: loader_dot;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes loader_dot {
  0% {
    width: 0px;
    height: 0px;
  }
  to {
    width: 50px;
    height: 50px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button id="testKey">test1</button>
<BR />
<BR />
<button id="setSave">test2</button>


<div id="loader2" style="visibility:hidden">
  <div class="dot"></div>
</div>

最初我使用jquery hide/show,但得到了相同的行为。注意:两个ajax调用都正常工作,但加载程序只显示JS注释中所示的调用。

3 回复 | 直到 6 年前

Charu Maheshwari 6 年前

问题是你隐藏加载程序的地方。当API结果出现时,你需要隐藏加载程序根据这个修改了你的代码。

function showThis(id) {
  console.log('12' + id);
  document.getElementById(id).style.visibility = "visible";
}

function hideThis(id) {
  document.getElementById(id).style.visibility = "hidden";
}

jQuery(function() {
  jQuery("#testKey").click(function(event) {
    // NEXT LINE DOESN'T WORK
    showThis('loader2');
    jQuery.ajax({
      type: "POST",
      dataType: "json",
      url: "/api/?action=testKey",
      data: {
        exchange: jQuery('#setExchange').val(),
        key: jQuery('#setKey').val(),
        secret: jQuery('#setSecret').val()
      },
      success: function(data) {
        if (!data.error) {
          hideThis("loader2");
          if (data.keyValid == true) {
            alert("API Key is valid");
          } else {
            alert("Invalid key and/or secret.");
          }
        } else {
          alert("Error: " + data.errorMsg);
          hideThis("loader2");
          return false;
        }

      }
    });
    //hideThis('loader2');
    //return false;
  });
});

jQuery(function() {
  jQuery('#setSave').click(function(event) {
    // THIS WORKS
    showThis("loader2");
    jQuery.post(
      '/api/?action=bcSaveSettings', {
        exchange: jQuery('#setExchange').val(),
        key: jQuery('#setKey').val(),
        secret: jQuery('#setSecret').val(),
      },
      function() {
        var newKey = jQuery('#setKey').val();
        var newSecret = jQuery('#setSecret').val();
        var exchangeNum = jQuery('#setExchange').val();
        var exchangeName = jQuery("#setExchange option:selected").text();
        jQuery("#setExchange option:selected").attr('dat', newKey);
        jQuery("#setExchange option:selected").attr('dat2', newSecret);
        if (jQuery("#depExchange option[value='" + exchangeNum + "']").length > 0 && newKey.length < 1 && newSecret.length < 1) {
          jQuery("#depExchange option[value='" + exchangeNum + "']").remove();
        } else if (jQuery("#depExchange option[value='" + exchangeNum + "']").length < 1 && newKey.length > 0 && newSecret.length > 0) {
          jQuery("#depExchange").append(jQuery('<option>', {
            value: exchangeNum,
            text: exchangeName
          }));
        }
        hideThis("loader2");
        alert("Settings saved");
      }
    );
    //event.preventDefault();
  });
});

#loader1 {
  background: #ecf0f1;
  position: relative;
  height: 100%;
  visibility: hidden;
}

#loader2 {
  background: #ecf0f1;
  position: relative;
  height: 100%;
  visibility: hidden;
}

.dot {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #2ecc71;
  border-radius: 100%;
  animation-duration: 1s;
  animation-name: loader_dot;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes loader_dot {
  0% {
    width: 0px;
    height: 0px;
  }
  to {
    width: 50px;
    height: 50px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button id="testKey">test1</button>
<BR />
<BR />
<button id="setSave">test2</button>


<div id="loader2">
  <div class="dot"></div>
</div>

Jarvis 6 年前

你需要打电话 hideThis('loader2'); 在里面 ajax() callback .
也许吧 success 或 error ,甚至 complete .

例子:

showThis()
jQuery.ajax({
  // `success` or `error`
  complete: function () {
    // call `hide` when the `callback` called
    hideThis()
  }
})

你的代码只是打电话 show 和 hide ,这不是等待 ajax 执行。

Ketan Vaghasiya 6 年前

第一个按钮代码的主要问题是“hideThis”函数。显示功能工作正常,但紧接着是“隐藏”。

在ajax post的“success”代码中移动hide函数应该没问题。