单击按钮时更改变量的值

时间:2018-08-08 11:33:08

标签: javascript jquery leaflet

我必须基于单击按钮在地图上选择一个标记。我有多个标记,每个标记都与下面的按钮相关联。我想更改该按钮的“ myloc”,默认情况下必须选择13、100。

HTML

<div class="row">
    <input type="button" id="btn-first" class="btn-a" value = "First">
    <input type="button" id="btn-second" class="btn-a" value = "Second">
</div>

JS

let myloc = new L.LatLng(13, 100);
var map = L.map('map').setView(myloc, 12);

$(function () {
    $('.btn-a').on('click', function(e){
        e.preventDefault();
        var clsName = $(this).val();
        var lat, long;

        if (clsName == 'First') {
            lat = 13;
            long = 100;
        } else if(clasName = 'Second') {
            lat = 14;
            long = 101;
        }
    })
});

3 个答案:

答案 0 :(得分:1)

我看不到您在任何地方设置myLoc对象。您只是为lat,lng分配值。检查下面的代码片段,看看是否能回答您的问题。

在这里,您要初始化myLoc,然后单击按钮以获取lat, lng的新值,然后再次将其设置为myLoc

//just a temp function to show the example. Dont add this in your code
var L = {
  LatLng: function(lat, lng) {
    console.log("Current Values for Lat, Lng: " + lat + " , "+ lng);
  }
}


let myloc = new L.LatLng(13, 100);
//var map = L.map('map').setView(myloc, 12);

$(function () {
    $('.btn-a').on('click', function(e){
      //  e.preventDefault();
        var clsName = $(this).val();
        var lat, long;

        if (clsName == 'First') {
            lat = 13;
            long = 100;
         } else if(clasName = 'Second') {
            lat = 14;
            long = 101;
        }
        
        //set the myloc here
         myloc = new L.LatLng(lat, long);
         //then map again
          //L.map('map').setView(myloc, 12)
    })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <input type="button" id="btn-first" class="btn-a" value = "First">
    <input type="button" id="btn-second" class="btn-a" value = "Second">
</div>

答案 1 :(得分:1)

以下是您可以使用的方法,与您正在执行的操作类似。该示例使用事件委托来监视按钮的单击,然后相应地设置latlong变量。这些变量然后用于更新全局myLoc的值。为了简单起见,我使用对象文字代替了new L.LatLng对象。

let myLoc = {
  lat: 13,
  long: 100
};
//new L.LatLng(13, 100);

document.querySelector('.row').addEventListener('click', function(e) {
  if (e.target.type === 'button') {
    let lat = 0;
    let long = 0;
    if (e.target.id === 'btn-first') {
      lat = 13;
      long = 100;
    } else if (e.target.id === 'btn-second') {
      lat = 14;
      long = 101;
    }

    myLoc = {
      lat,
      long
    };

    console.log(`myLoc.lat: ${myLoc.lat}; myLoc.long ${myLoc.long}`);
    //new L.LatLng(lat, long);
  }
});
<div class="row">
  <input type="button" id="btn-first" class="btn-a" value="First">
  <input type="button" id="btn-second" class="btn-a" value="Second">
</div>

答案 2 :(得分:0)

$(document).ready(function(){

var token = await HttpContext.GetTokenAsync("id_token").ConfigureAwait(false);