堆棧內存溢出
  簡體   English   中英

jQuery調用javascript函數

[英]Jquery calling javascript function

 原文  2016-03-08 02:06:56  0   2    javascript/ jquery/ html

問題描述

這是我的代碼。 我在jquery中調用javascript函數時遇到麻煩。 希望有人可以幫忙。 所有的jQuery源都在我的桌面上 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Heatmaps</title>
    <link rel="stylesheet" href="/Users/billy.sutomo/Desktop/jQRangeSlider-5.7.2/css/iThing.css" type="text/css" />
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="/Users/billy.sutomo/Desktop/ion.rangeSlider.js"></script>

    <script>
// Adding 500 Data Points
$("#example_id").ionRangeSlider({
    type: "double",
    min: 0,
    max: 1000,
    from: 200,
    to: 500,
    grid: true
});
var map, pointarray, heatmap;

var dataCoba = [
[-6.3101575, 106.8866042,1,5000],
[-6.3207277, 106.7199845,1,5000],
[-6.3347923, 106.8960634,1,5000],
[-6.3385232, 106.887307,1,5000],
[-6.3398398, 106.8518703,1,5000],
[-6.3416666, 106.7769226,1,5000],
[-6.346902, 106.93247,1,6000],
[-6.3478682, 106.8636581,1,6000],
[-6.3588784, 106.8845249,1,6000]];

function initialize() {
  var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(-6.187595, 106.823713),
    mapTypeId: google.maps.MapTypeId.MAP
  };

  var dataTes = []

    for(i=0 ; i < dataCoba.length ; i++){
        //if(dataCoba[i][3]==6000)
        dataTes.push({location: new google.maps.LatLng(dataCoba[i][0], dataCoba[i][1]), weight :dataCoba[i][2]});
    }

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var pointArray = new google.maps.MVCArray(dataTes);

  heatmap = new google.maps.visualization.HeatmapLayer({
    data: pointArray,
    radius: 22
  });

  heatmap.setMap(map);
}

function gantiNilai(o){
    var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(-6.187595, 106.823713),
    mapTypeId: google.maps.MapTypeId.MAP
  };

  var dataTes = []

    for(i=0 ; i < dataCoba.length ; i++){
        if(dataCoba[i][3]==o)
        dataTes.push({location: new google.maps.LatLng(dataCoba[i][0], dataCoba[i][1]), weight :dataCoba[i][2]});
    }

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var pointArray = new google.maps.MVCArray(dataTes);

  heatmap = new google.maps.visualization.HeatmapLayer({
    data: pointArray,
    radius: 22
  });

  heatmap.setMap(map);
}

function toggleHeatmap() {
  heatmap.setMap(heatmap.getMap() ? null : map);
}

function changeGradient() {
  var gradient = [
    'rgba(0, 255, 255, 0)',
    'rgba(0, 255, 255, 1)',
    'rgba(0, 191, 255, 1)',
    'rgba(0, 127, 255, 1)',
    'rgba(0, 63, 255, 1)',
    'rgba(0, 0, 255, 1)',
    'rgba(0, 0, 223, 1)',
    'rgba(0, 0, 191, 1)',
    'rgba(0, 0, 159, 1)',
    'rgba(0, 0, 127, 1)',
    'rgba(63, 0, 91, 1)',
    'rgba(127, 0, 63, 1)',
    'rgba(191, 0, 31, 1)',
    'rgba(255, 0, 0, 1)'
  ]
  heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
}

function changeRadius(r) {
      /* This was the original line in the example code.
         It simply toggles between default and radius=20
         when a button is clicked. */
      //heatmap.set('radius', heatmap.get('radius') ? null : 20);

      /* I've replaced it with this. */
      heatmap.set('radius', r);
}

function changeOpacity(min,max) {
      var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(-6.187595, 106.823713),
    mapTypeId: google.maps.MapTypeId.MAP
  };

  var dataTes = []

    for(i=0 ; i < dataCoba.length ; i++){
        if(dataCoba[i][3]==o > min && dataCoba[i][3]==o < max)
        dataTes.push({location: new google.maps.LatLng(dataCoba[i][0], dataCoba[i][1]), weight :dataCoba[i][2]});
    }

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var pointArray = new google.maps.MVCArray(dataTes);

  heatmap = new google.maps.visualization.HeatmapLayer({
    data: pointArray,
    radius: 22
  });

  heatmap.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>

  <body>
    <div id="panel">
      <button onclick="toggleHeatmap()">Toggle Heatmap</button>
      <button onclick="changeGradient()">Change gradient</button>

      <!-- The next two lines are the original buttons -->
      <!--button onclick="changeRadius()">Change radius</button-->
      <!--button onclick="changeOpacity()">Change opacity</button-->

      <!-- These are the sliders I added.  Opacity works fine.  Radius does not. -->
      Radius
      <input type="range" id="radiusSlider" onchange="changeRadius(radiusSlider.value)"  min="1" max="40" step="1" value="12">
      Value
      <input type="range" id="opacitySlider" onchange="gantiNilai(opacitySlider.value)"  min="1000" max="6000" step="1000" value="1000">
      <div id="editSlider"></div>
      <input type="text" id="example_id" name="example_name" value="" />

    </div>
    <div id="map-canvas"></div>
    <script src="/Users/billy.sutomo/Desktop/jquery-2.2.1.min.js"></script>
    <script src="/Users/billy.sutomo/Desktop/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
    <script src="/Users/billy.sutomo/Desktop/jQRangeSlider-5.7.2/jQEditRangeSlider-min.js"></script>
     <script>
    $("#editSlider").rangeSlider({bounds: {min: 1000, max: 6000}, defaultValues:{min: 2000, max: 3000}});
     </script>
  </body>
</html>

我該如何稱呼此javascript函數 

changeOpacity(min,max)

在這個jQuery函數里面 

$("#editSlider").rangeSlider({bounds: {min: 1000, max: 6000}, defaultValues:{min: 2000, max: 3000}});

在此之前

2 個解決方案

解決方案1
 1 已采納  2016-03-08 02:18:54

你必須使用 

$("#slider").bind("valuesChanging", function(e, data){
  changeOpacity(min,max)
});

您在滑條值上放置的函數會在滑條上的每個間隔被調用

解決方案2
 0  2016-03-08 02:44:04

等一下，您正在使用離子范圍滑塊。 

$("#editSlider").rangeSlider({
    bounds: {min: 1000, max: 6000}, 
    defaultValues:{min: 2000, max: 3000},
    onChange: changeOpacity(min, max)
});

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 用JavaScript調用jQuery函數 jQuery - 調用javascript函數 用JavaScript調用jQuery函數 jQuery javascript此函數未調用 在 jQuery 中調用 Javascript function 在javascript / jQuery中將函數作為函數調用 用Javascript函數調用jQuery函數 在jQuery中調用JavaScript函數 從javascript函數調用jquery jQuery ajax調用javascript函數
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM