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

Question

我有两种类型的超链接。单击第一种时，href 的值被传递给函数，但它的值从未在 window.location 中使用！（因为它在 safari 而不是 iphone webApp 中打开链接）。当第二个超链接被称为 href 的值永远不会传递给函数，并且再次在 safari 而不是 webApp 中打开 href 值！谁能帮我将 href 的值传递给函数并在 window.location 中使用它而不是在 safari 上打开它.提前致谢。

<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 指出的那样，最好不要使用内联JavaScript（一些原因只是个人喜好）。您最终会重复自己并难以维护您的代码 (among other reasons)。你最好的选择是使用Event Listeners（w3schools 链接，并不总是最好的资源，但对于这个例子来说已经足够了）。如果您使用 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"。这将使我们能够更轻松地使用我们的事件侦听器引用您的链接。

对于 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" 的任何元素的数组。稍后我们将遍历这个数组，并添加事件监听器。在我们循环之前，我们需要创建你的函数。

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

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

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

还有here's a working example on JSFiddle。