Question

我正在尝试将超链接单击中的值从一个JS函数传递给另一个。在这种情况下，我需要超链接文本，这是本地存储中的密钥。我需要将其传递给其他html / JS脚本，以从本地存储访问此密钥。我在完成这项工作方面真是费劲。最后一个console.log（）;该脚本中的语句返回“链接名称：未定义”

myApp.onPageInit("saved_locations", function(page) {
  var fragment = document.createDocumentFragment();
  var parent = document.getElementById("saved");
  var node;
  // iterate localStorage
  for (var i = 0; i < localStorage.length; i++) {
    // set iteration key name
    var key = localStorage.key(i);

    // use key name to retrieve the corresponding value
    var value = localStorage.getItem(key);

    // console.log the iteration key and value
    console.log("Key: " + key + ", Value: " + value);

    let node = document.createElement("div");
    let a = document.createElement("a");
    a.className = "link";
    a.textContent = key;
    a.style.color = "blue";
    a.href = "map_G.html";

    node.appendChild(a);

    fragment.appendChild(node);
  }

  parent.appendChild(fragment);

  var myForm = document.getElementById("enter_location");

  myForm.addEventListener("submit", function saveSearchLocation(event) {
    //event.preventDefault();

    var lat = document.getElementById("Latitude").value;
    var lon = document.getElementById("Longitude").value;
    var locationStr = document.getElementById("Location").value;

    //Save location parameters to local storage
    savedLocationParams = [lat, lon, locationStr];
    window.localStorage.setItem(
      locationStr,
      JSON.stringify(savedLocationParams)
    );
  });

  for (var i in document.getElementsByClassName("link")) {
    var link = document.getElementsByClassName("link")[i];

    link.onclick = function(e) {
      linkNames = e.srcElement.attributes.textContent;
      console.log("Link names: " + linkNames);
    };
  }
});

<body>
  <div class="pages">
    <div data-page="saved_locations" id="saved" class="page navbar-through no- 
    toolbar" align="center">
      <h2><br /><u>Enter A Location<br /><br /></u></h2>
      <form id="enter_location">
        Latitude: <input type="text" id="Latitude" value=""><br> Longitude: <input type="text" id="Longitude" value=""><br> Location: <input type="text" id="Location" value=""><br>
        <input type="submit" value="Submit">
      </form>
      <h2><u>Saved Locations</u></h2>
    </div>
  </div>
</body>

Answer 1

由于链接名称没有更改，因此只需在您仍可以使用快捷键的同时定义onclick函数即可。

let a = document.createElement("a");
a.className = "link";
a.textContent = key;
a.style.color = "blue";
a.href = "map_G.html";

a.onclick = function(e) {
  console.log("Link names: " + key);
};

node.appendChild(a);

该问题的底部是该解决方案的MCVE。

一旦将其保存在onclick中，您可以设置另一个本地存储密钥，该密钥将永远不是链接的文本，例如“ hambone_key”，并将其值设置为您需要保存的密钥，然后您就可以加载页面并以这种方式获取密钥时，请阅读“ hambone_key”。例如：

a.onclick = function(e) {
  console.log("Link names: " + key);
  localStorage["hambone_key"] = key;
};

然后在页面加载时

var saved_key = localStorage.getItem("hambone_key");
if (saved_key === null) {
    // there is no saved key
} else { 
    // there is a saved key
    var important_value = localStorage.getItem(saved_key);

    // do stuff with important_value here
    // ....
}

因此，在您提供的代码的上下文中，它看起来像这样：

myApp.onPageInit("saved_locations", function(page) {
  var fragment = document.createDocumentFragment();
  var parent = document.getElementById("saved");
  var node;
  // iterate localStorage
  for (var i = 0; i < localStorage.length; i++) {
    // set iteration key name
    var key = localStorage.key(i);

    // use key name to retrieve the corresponding value
    var value = localStorage.getItem(key);

    // console.log the iteration key and value
    console.log("Key: " + key + ", Value: " + value);

    let node = document.createElement("div");
    let a = document.createElement("a");
    a.className = "link";
    a.textContent = key;
    a.style.color = "blue";
    a.href = "map_G.html";

    a.onclick = function(e) {
      console.log("Link names: " + key);
      localStorage["hambone_key"] = key;
    };

    node.appendChild(a);

    fragment.appendChild(node);
  }

  parent.appendChild(fragment);

  var myForm = document.getElementById("enter_location");

  myForm.addEventListener("submit", function saveSearchLocation(event) {
    //event.preventDefault();

    var lat = document.getElementById("Latitude").value;
    var lon = document.getElementById("Longitude").value;
    var locationStr = document.getElementById("Location").value;

    //Save location parameters to local storage
    savedLocationParams = [lat, lon, locationStr];
    window.localStorage.setItem(
      locationStr,
      JSON.stringify(savedLocationParams)
    );
  });
});

这是在onclick函数中获取密钥的MCVE。下面的代码在这里不使用localStorage，因为在StackOverflow代码段中禁止使用它：

var fragment = document.createDocumentFragment();
var parent = document.getElementById("saved");
var node;
var fakeLocalStorage = {
  "key0": "value0",
  "key1": "value1",
  "key2": "value2"
};

// iterate localStorage
//for (var i = 0; i < localStorage.length; i++) {
for (var i = 0; i < 3; i++) {
  // set iteration key name
  //var key = localStorage.key(i);

  // use key name to retrieve the corresponding value
  //var value = localStorage[key];

  // set iteration key name
  let key = Object.keys(fakeLocalStorage)[i];

  // use key name to retrieve the corresponding value
  let value = fakeLocalStorage[key];

  // console.log the iteration key and value
  console.log("Key: " + key + ", Value: " + value);

  let node = document.createElement("div");
  let a = document.createElement("a");
  a.className = "link";
  a.textContent = key;
  a.style.color = "blue";
  a.href = "javascript:return false;";

  a.onclick = function(e) {
    console.log("Link names: " + key);
  };

  node.appendChild(a);

  fragment.appendChild(node);
}

parent.appendChild(fragment);

var myForm = document.getElementById("enter_location");

myForm.addEventListener("submit", function saveSearchLocation(event) {
  //event.preventDefault();

  var lat = document.getElementById("Latitude").value;
  var lon = document.getElementById("Longitude").value;
  var locationStr = document.getElementById("Location").value;

  //Save location parameters to local storage
  savedLocationParams = [lat, lon, locationStr];
  window.localStorage.setItem(
    locationStr,
    JSON.stringify(savedLocationParams)
  );
});

<body>
  <div class="pages">
    <div data-page="saved_locations" id="saved" class="page navbar-through no- 
    toolbar" align="center">
      <h2><br /><u>Enter A Location<br /><br /></u></h2>
      <form id="enter_location">
        Latitude: <input type="text" id="Latitude" value="">
        <br /> Longitude: <input type="text" id="Longitude" value="">
        <br /> Location: <input type="text" id="Location" value="">
        <br /> <input type="submit" value="Submit">
      </form>
      <h2><u>Saved Locations</u></h2>
    </div>
  </div><br /><br /><br /><br /><br /><br /><br />
</body>

Answer 2

我找到了一个使用JQuery的简单解决方案：

$(a).click(function(e) {
          var txt = $(e.target).text();
          console.log("Link: " + txt)
          });

将OnClick事件中的参数从一个Javascript函数传递给另一个Javascript函数

2 个答案: