如何将进度条放置在触发任务的元素周围？

Question

我正在使用 jQuery 开发一个动态网站，该网站严重依赖 AJAX 操作。每当 AJAX 操作开始时，我都会弹出一个进度条，我将其放置在网页中间。

我发现访问者将眼睛从他们单击的元素上切换到观看可能距离元素数公里远的进度条，然后在进度条消失时返回到元素或其周围，这很烦人。

如何将进度条放置在元素周围？

我想我首先需要一种方法来告诉被单击元素的位置。这个我也不知道怎么办

Answer 1

要将进度条定位在元素周围，您需要使用单击事件函数，您可以在其中确定单击元素时会发生什么的功能，然后您只需通过执行以下操作来设置进度条相对于单击的元素的位置使用

$(this)

关键字在 click 函数内重新定位以获取当前元素位置。

这是一个具有进度条重新定位的代码片段。

  // Event listener for the click event on the example element
  $('#example-element').click(function(event) {
    // Show the progress bar
    $('#progress-bar').show();
    
    // Get the position of the clicked element
    var elementPos = $(this).offset();
    var elementWidth = $(this).outerWidth();
    var elementHeight = $(this).outerHeight();
    
    // Calculate the position for the progress bar
    var progressBarLeft = elementPos.left + (elementWidth / 2) - ($('#progress-bar').outerWidth() / 2);
    var progressBarTop = elementPos.top + (elementHeight / 2) - ($('#progress-bar').outerHeight() / 2);
    
    // Position the progress bar
    $('#progress-bar').css({
      left: progressBarLeft,
      top: progressBarTop
    });
  });

AJAX 功能完成后，您可以将进度条放回原来的位置。

希望有帮助...！