javascript - 为 AJAX 添加 onclick 函数

Question

所以我有 5 个选项卡按钮和 5 个选项卡容器。每个容器都附加到一个 AJAX，该 AJAX 将经度和纬度发送到我的 php 文件，处理后，容器将显示结果。我没能将我的 AJAX 整合到一个函数中。但是，有人可以帮助我将 onclick 函数添加到 AJAX 调用中，以便它仅在用户单击相应选项卡按钮时执行吗？

还有

在第一个 AJAX 函数中获取用户位置后，我可以在另一个 AJAX 中再次使用这些变量，而无需再次请求位置吗？

这是我的网站:https://www.aarontomlinson.com

这是所需的代码

AJAX 函数

$(document).ready(function(){
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showShopsSponsored);
    } else { 
        $('#ShopsSponsored').html('Geolocation is not supported by this browser.');

    }
});

function showShopsSponsored(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
     $(".spinner").show();
    $.ajax({
        type:'POST',
        url:'ShopsSponsored.php',
        data:'latitude='+latitude+'&longitude='+longitude,
        success:function(msg){
            if(msg){
               $("#ShopsSponsored").html(msg);
            }else{
                $("#ShopsSponsored").html('Not Available');
            }
             $(".spinner").hide();
        }
    });

}   



$(document).ready(function(){
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showShopsDistance);
    } else { 
        $('#ShopsDistance').html('Geolocation is not supported by this browser.');

    }
});

function showShopsDistance(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
     $(".spinner").show();
    $.ajax({
        type:'POST',
        url:'ShopsDistance.php',
        data:'latitude='+latitude+'&longitude='+longitude,
        success:function(msg){
            if(msg){
               $("#ShopsDistance").html(msg);
            }else{
                $("#ShopsDistance").html('Not Available');
            }
                 $(".spinner").hide();
        }
    });

}   

选项卡容器的 HTML

  <!-- TAB BUTTONS  -->
  <ul id="tabs" class="menu-left">
      <li><button2><a  id="tab1" ><div style="width:100vw;white-space:nowrap;overflow: hidden;">Suggested</div></a></button2></li>
    <li><button2><a id="tab2">Distance</a></button2></li>
    <li><button2><a id="tab3">Rating</a></button2></li>
    <li><button2><a id="tab4">OPEN</a></button2></li>
    <li><button2><a id="tab5">Delivery Price</a></button2></li>
  </ul>


<!-- TAB CONTAINERS  -->
<div class="tabcontainer" id="tab1C">
    <div style="position: relative;" id="ShopsSponsored">
        <div class="spinner">
          <div class="rect1"></div>
          <div class="rect2"></div>
          <div class="rect3"></div>
          <div class="rect4"></div>
          <div class="rect5"></div>
        </div>
    </div>
</div>

<div class="tabcontainer" id="tab2C">
    <div style="position: relative;" id="ShopsDistance">    
            <div class="spinner">
              <div class="rect1"></div>
              <div class="rect2"></div>
              <div class="rect3"></div>
              <div class="rect4"></div>
              <div class="rect5"></div>
        </div>
    </div>
</div>


// TAB CONTAINER SCRIPT
$(document).ready(function() {    

$('#tabs li a:not(:first)').addClass('inactive');
$('.tabcontainer').hide();
$('.tabcontainer:first').show();

$('#tabs li a').click(function(){
    var t = $(this).attr('id');
  if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('#tabs li a').addClass('inactive');           
    $(this).removeClass('inactive');

    $('.tabcontainer').hide();
    $('#'+ t + 'C').fadeIn('fast');
 }
});

});

************我的目标********************

我希望这个函数与页面一起加载并将结果发送到容器，就像它一样。

$(document).ready(function(){
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showShopsSponsored);
} else { 
    $('#ShopsSponsored').html('Geolocation is not supported by this browser.');

}

});

function showShopsSponsored(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
     $(".spinner").show();
    $.ajax({
        type:'POST',
        url:'ShopsSponsored.php',
        data:'latitude='+latitude+'&longitude='+longitude,
        success:function(msg){
            if(msg){
               $("#ShopsSponsored").html(msg);
            }else{
                $("#ShopsSponsored").html('Not Available');
            }
             $(".spinner").hide();
        }
    });

}

<小时/>

现在我希望在单击 TAB 时加载此函数

功能

function showShopsDistance(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
     $(".spinner").show();
    $.ajax({
        type:'POST',
        url:'ShopsDistance.php',
        data:'latitude='+latitude+'&longitude='+longitude,
        success:function(msg){
            if(msg){
               $("#ShopsDistance").html(msg);
            }else{
                $("#ShopsDistance").html('Not Available');
            }
                 $(".spinner").hide();
        }
    });

}   

标签

<button2><a id="tab2">Distance</a></button2>

<小时/>

奖励积分

这个函数也可以写成不请求位置吗？而是使用第一个函数中的位置变量？

$(document).ready(function(){
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showShopsDistance);
    } else { 
        $('#ShopsDistance').html('Geolocation is not supported by this browser.');

    }
});

function showShopsDistance(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
     $(".spinner").show();
    $.ajax({
        type:'POST',
        url:'ShopsDistance.php',
        data:'latitude='+latitude+'&longitude='+longitude,
        success:function(msg){
            if(msg){
               $("#ShopsDistance").html(msg);
            }else{
                $("#ShopsDistance").html('Not Available');
            }
                 $(".spinner").hide();
        }
    });

}   

<小时/>

谢谢!这不应该那么难，我只是不断失败!

Answer 1

一些评论:

• 我会使用 active 类而不是 inactive 类，因为您只真正关心事件类。

• 您可能会发现使用 HTML5 data attributes 很有用。用于您的容器。 data-tab 是选项卡及其容器的 1-1 映射。 data-url 是将在 AJAX 请求中调用的 url。

• 我相信您只需要获取一次地理位置即可。因此，您可以获取纬度和经度，并将它们存储在某个位置，例如隐藏元素或 localStorage 。然后让您的 AJAX 调用使用 localStorage 中存储的任何内容。

未经测试，但看起来像这样:

HTML

<!-- TAB BUTTONS  -->
<ul id="tabs" class="menu-left">
    <li class="active"><button2><a href="#" data-tab="ShopsSponsored"><div style="width:100vw;white-space:nowrap;overflow: hidden;">Suggested</div></a></button2></li>
    <li><button2><a href="#" data-tab="ShopsDistance">Distance</a></button2></li>
    <!-- etc -->
</ul>

<!-- TAB CONTAINERS  -->
<div class="tabcontainer active" data-tab="ShopsSponsored" data-url="ShopsSponsored.php">
    <div style="position: relative;">
        <div class="spinner">
            <div class="rect1"></div>
            <div class="rect2"></div>
            <div class="rect3"></div>
            <div class="rect4"></div>
            <div class="rect5"></div>
        </div>
    </div>
</div>
<div class="tabcontainer" data-tab="ShopsDistance" data-url="ShopsDistance.php">
    <div style="position: relative;">    
        <div class="spinner">
            <div class="rect1"></div>
            <div class="rect2"></div>
            <div class="rect3"></div>
            <div class="rect4"></div>
            <div class="rect5"></div>
        </div>
    </div>
</div>
<!-- etc -->

CSS

/* by default, tabs should be hidden */
.tabs li, .tabcontainer {
    display: none;
}
/* only active ones should be visible */
.tabs li.active, .tabcontainer.active {
    display: block;
}

JavaScript

$(function () {

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            saveCoordinates(position.coords);
        });
    } else { 
        // probably good idea to have some default geolocation since all your AJAX calls seem to rely on a geolocation
        saveCoordinates({ latitude: 1, longitude: 2 });
    }

    $('#tabs li a').click(function (e) {
        e.preventDefault();
        var link = $(this), 
            tab = link.closest('li'), 
            tabContainer = $('.tabcontainer[data-tab="' + link.data('tab') + '"]'),
            spinner = tabContainer.find('.spinner');
        // activate tab
        tab.addClass('active').siblings().removeClass('active');
        // activate tab container
        tabContainer.addClass('active').siblings().removeClass('active');
        // make AJAX call
        spinner.show();
        $.ajax({
            type: 'POST',
            url: tabContainer.data('url'), 
            data: { 
                latitude: localStorage.getItem('latitude'), 
                longitude: localStorage.getItem('longitude') 
            }, 
            success: function (msg) {
                spinner.hide();
                if (msg) {
                    tabContainer.find('> div').html(msg);
                } else {
                    tabContainer.find('> div').html('Not Available');
                }
            }
        });
    });

    function saveCoordinates(coords) {
        localStorage.setItem('latitude', coords.latitude);
        localStorage.setItem('longitude', coords.longitude);
    }
});