Question

我目前有两个按钮，其功能是添加和删除按钮。还有第三个按钮，它获取用户的地理位置。如何使添加的按钮充当第三个按钮？ - 添加按钮时意味着自动具有地理位置功能。</ p>

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <style>
   button{
     height:100px;
     width: 80px;
     text-align: center;
     margin: 5px 4px;
   }
  #mainButtons button{
    display: inline-block;
    margin: auto;
    }
   </style>


 <div id="mainButtons">
 <button onclick="addButton()">Add Contact</button>
 <button onclick="removeButton()">Remove Contact</button>
</div>
</br>
<div id="que"></div>

<script>
var increment = 0;
function addButton(){
 $("#que").append($("<button id='btn"+(increment++)+"'>Send Location to: "+ (increment)+"</button>"));
}

function removeButton(){
  $("#btn"+(increment-1)).remove();
  increment--;
}
</script>
</head>
<body>

<button onclick="getLocation()">Send Location to: </button>

<p id="MyLocation"></p>

<script>
var x = document.getElementById("MyLocation");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
   }
}

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>

Answer 1

您想在绑定事件后添加按钮吗？

import React from 'react';
import { Component } from 'components/Component';
import { mount } from 'enzyme';
import { expect } from 'chai';

describe('(Component) HeaderBlockMap', () => {
  let wrapper;
  let search;

  beforeEach(() => {
    wrapper = mount(<Component />);
  });

  it('renders a container', () => {
    const container = wrapper.find('.container');
    expect(container).to.exist;
  });
});

Answer 2

您可以通过将元素传递给getLocation来完成此操作。 JSBin中的工作示例。

var increment = 0;
function addButton(){
  var id = 'btn' + (increment++);
  var que = $("#que");
  var el = $("<button id='"+id+"'>Click for location</button>");
  que.append(el);
  clickHandler(el);
}

function removeButton(){
  if (increment >= 0) {
    $("#btn"+(increment-1)).remove();
    increment--;
  }
}

function clickHandler(el) {
  el.click(function() {
    getLocation(el);
  });
}

function getLocation(el) {
  el.html("Loading....");
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) { showPosition(el, position); });
  } else { 
    el.html("Geolocation is not supported by this browser.");
  }
}

function showPosition(el, position) {
  el.html("Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude);
}

添加按钮以充当一个功能

2 个答案: