单击超链接时如何将 href 的值传递给 javascript 并在 window.location 中使用它？

Question

我有两种类型的 hyperlinks 。当第一个被点击时，href 的值被传递给函数，但它的值从未在 window.location 中使用过！（因为它打开 link 在 safari 而不是 iphone webApp 中）。当调用第二个 hyperlink 时，href 的值永远不会传递给函数，并且 href 值再次在 safari 而不是 webApp 中打开！可能任何人都可以帮助我将 href 的值传递给函数并在 window.location 中使用它，而不是提前在 safari.Thanks 上打开它。

<li class="x"><a id="1" title="1" href="./test.php?try" onclick="myFunction(location.href=this.href);"> <img id="Button1" src="./1.png" alt="" width="42" height="42" border="0"><div class="caption" style="color:red">FIRST</div></a></li>
<li class="x"><a id="2" title="2" href="./test.php" onclick="myFunction(location.href=this.href+'?try&appid='+currentID;return false;);"> <img id="Button2" src="./2.png" alt="" width="42" height="42" border="0"><div class="caption" style="color:red">SECOND</div></a></li>


<script>
function myFunction(myLink) {

alert("hello"+myLink);

    window.location = myLink;
}
</script>

Answer 1

您正在尝试运行才能走路...

您的 javascript 需要做更多的工作。避免将 javascript 放在 html 中。因此避免这样的事情：

onclick="myFunction(location.href=this.href);"

我会使用 jquery（javascript 库），因为它会在长期运行中提供帮助，因为它会导致您跨浏览器兼容。

您的 "id" 标签应该是字母或字母数字，而不是数字。所以 id="1" 是（我相信）非法的，即使它有效。

实际上...抱歉...但是我想得越多，您确实需要一本好书来提升您的 javascript，然后再尝试您想要做的事情，否则您将无法理解您的某些工作的局限性或风险。

使用jquery（它本身写在javascript中）你可以通过

改变URL

$("#link1").click( Change1 );
$("#link2").click( Change2 );

function Change1()
{
 $("#link1").href("./test.php?try");
}

function Change1()
{
 $("#link2").href("./test.php?try");
}

如果您的 id 标签从 id="1" 重命名为 id="link1" 并将 id="2" 重命名为 id="link2"

对不起，我帮不上忙了...

Answer 2

这里有几件事在起作用。正如 fiprojects 指出的那样，最好不要做 inline JavaScript （一些原因只是个人喜好）。你最终会重复自己并使维护代码变得困难 (among other reasons). Your best bet is to use Event Listeners (w3schools link，并不总是最好的资源，但对于这个例子来说已经足够了)。如果你重新使用 JavaScript 库 (jQuery)。但是由于您请求了 JavaScript 解决方案，我将在我的回答中概述如何做到这一点。

首先，让我们格式化您的代码以使其更易于阅读：

<li class="x">
    <a id="1" title="1" href="./test.php?try" class="myLink">
        <img id="Button1" src="http://placehold.it/360x240">
        <div class="caption" style="color:red">FIRST</div>
    </a>
</li>
<li class="x">
    <a id="2" title="2" href="./test.php" class="myLink"> 
        <img id="Button2" src="http://placehold.it/360x240">
        <div class="caption" style="color:red">SECOND</div>
    </a>
</li>

我在这里只做了一些改动。我删除了 JavaScript onclick。我创建了一个占位符图像（仅出于我自己的目的，因为我没有你的图像，你会想把你的图像放回那里）。最后，我在你的 <a> 中添加了一个 class="myLink"。这将使我们能够更轻松地通过事件侦听器引用您的 link。

对于JavaScript

<script>
    var linksArray = document.getElementsByClassName("myLink");

    var myFunction = function(event) {
        event.preventDefault();
        var href = this.getAttribute("href");
        alert('hello ' + href);
        window.location = link;
        return false;
    };

    for (var i = 0; i < linksArray.length; i++) {
        linksArray[i].addEventListener('click', myFunction, false);
    }
</script>

第一行是创建一个数组，其中包含具有 class="myLink" 的任何元素。稍后我们将遍历这个数组，并添加事件监听器。在我们循环之前，我们需要创建你的函数。

为了防止用户单击 link 时发生的默认操作，我们需要停止传播。所以我们将在这里使用 event.preventDefault()。我还在函数中添加了 return false; 。两者都旨在做同样的事情。

我们将使用 this 来获取引用，而不是传递变量。我们还将使用 JavaScript 函数 getAttribute 并将 href 传递给它。这将为您提取 href 值。

最后，我们正在循环 linksArray。我们正在添加一个 click 事件侦听器并将 myFunction 分配为 callback。现在，只要用户点击其中一张图片，就会触发此功能。

和here's a working example on JSFiddle.

单击超链接时如何将 href 的值传递给 javascript 并在 window.location 中使用它？

How to pass value of href to javascript and use it in window.location when a hyperlink is clicked?

javascript

href

window.location

iphone-web-app