Question

在页面加载时，我的代码将用户位置与每个电车站的坐标进行比较，并选择最接近的电子站点。

问题在于@extends('master') @section('title', 'Trams') @section('extrafiles') <script type="text/javascript" src="{{ asset('js/tram.js') }}"></script> @endsection @section('content') <section class="container"> <div class="row"> <div class="col-xs-12"> <h1>Metrolink Times</h1> </div> </div> <div class="row"> <div class="col-xs-12"> <div class="form-group"> <label for="tram_stops">Select a station:</label> <form id="tram_stops"> <select id="tram_dropdown" class="form-control" onchange="tram_stops(this.value);"> @foreach($entities as $entity) <option data-lng="{{ $entity->_geoloc->lng }}" data-lat="{{ $entity->_geoloc->lat }}" value="{{empty($entity->_geoloc->slug) ? 'no-slug' : $entity->_geoloc->slug}}">{{$entity->name}}</option> @endforeach </select> </form> </div> </div> <div id="display"> </div> </div> </section> @endsection，因为当我更改值时，我收到错误：

SCRIPT438：SCRIPT438：对象不支持属性或方法＆＃39; tram_stops＆＃39;

有谁知道如何解决这个问题？

$(document).ready(function() {
  var user_lat;
  var user_lng;
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    alert("Geolocation is not supported by this browser.");
  }

  function showPosition(position) {
    var distanceArray = [];
    var slugArray = [];
    user_lat = position.coords.latitude;
    user_lng = position.coords.longitude;
    $("option").each(function() {
      var unit = "K";
      var tram_lat = $(this).attr("data-lat");
      var tram_lng = $(this).attr("data-lng");
      var slug = $(this).attr("value");
      var radlat1 = Math.PI * tram_lat / 180
      var radlat2 = Math.PI * user_lat / 180
      var theta = tram_lng - user_lng;
      var radtheta = Math.PI * theta / 180
      var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
      dist = Math.acos(dist)
      dist = dist * 180 / Math.PI
      dist = dist * 60 * 1.1515
      if (unit == "K") {
        dist = dist * 1.609344
      }
      if (unit == "N") {
        dist = dist * 0.8684
      }
      slugArray.push(slug);
      distanceArray.push(dist);
    });
    var closest = Math.min(...distanceArray);
    var index = (distanceArray.indexOf(closest));
    var slug = (slugArray[index]);
    if (sessionStorage.getItem("item") === null) {
      sessionStorage.setItem("item", slug);
      timeout();
    } else {
      timeout();
    }
  }
});

function timeout() {
  setTimeout(function() {
    var tram_val = sessionStorage.getItem("item");
    tram_stops(tram_val);
    $("#tram_dropdown").val(tram_val);
  }, 30000);
}

function tram_stops(tram_value) {
  sessionStorage.setItem("item", tram_value);
  $.ajax({
    url: '/tramsearch/' + tram_value,
    type: 'post',
    dataType: 'html',
    success: function(data) {
      $("#display").html(data);
      var tram_value = tram_value;
    },
    error: function(data) {
    },
    headers: {
      'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
    }
  });
  timeout();
}

curl

Answer 1

<强>原因

如果您的javascript函数与任何HTML元素ID同名，则会发生这种情况。在您的情况下，tram_stops是，您有表单ID和此名称的函数。

 <form id="tram_stops">

<强>解决方案

使用jQuery动态更改表单ID或更改函数名称或附加onchange事件：

$("body").on("change", "#tram_dropdown", function(){/*Your Code*/});

Answer 2

您最好不要添加onchange=""属性，而是更好地监听活动。以下是如何执行此操作的示例：

$("body").on("change", "#tram_dropdown", function(){
    sessionStorage.setItem("item", tram_value);
    $.ajax({
        url: '/tramsearch/' + tram_value,
        type: 'post',
        dataType: 'html',
        success: function(data) {
          $("#display").html(data);
          var tram_value = tram_value;
        },
        error: function(data) {
        },
        headers: {
          'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
        }
    });
    timeout();
});

希望这有帮助！

Answer 3

将更改功能更改为：

 onchange="tram_stops();"

然后使用jquery获取值，如下所示：

var tram_value = $('#tram_dropdown').val();

通过html调用js函数会导致错误

3 个答案: