Javascript 更改 url onclick

Question

我想根据点击切换按钮（输入复选框）修改一个url。

至于价格，我无法在点击时更改网址。 我希望在第二次点击时，（按钮的）url 将返回这个初始值（url1）。

价格是正确的......点击时，改变是好的，但网址不好：/

谢谢你的帮助

 function show() { var x = document.getElementById("price"); if (x.innerHTML === "59€") { x.innerHTML = "89€"; } else { x.innerHTML = "59€"; } var x = document.getElementById("url1").href; if (x.href === "url1") { document.getElementById("url1").href = "url2"; } else { document.getElementById("url1").href = "url"; } }

 body{font-family:arial, 'sans serif';} .btn{ background:#000; padding:10px; color:#fff; text-decoration:none; font-family:arial, 'sans serif'; margin:0 auto; width:150px; display:block; text-align:center; border-radius:10px; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; } /* Hide default HTML checkbox */ .switch input { opacity: 0; width: 0; height: 0; } /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } h3{ text-align:center; }

 <p>Click here</p> <label class="switch"> <input onclick="show()" type="checkbox"> <span class="slider round"></span> </label> <h3 class="price-presta" id="price">59€</h3> <a class="btn" id="url1" href="url1">url link button</a> <!-- url does not change on second click like the price -->

Answer 1

有2个问题。 首先，这里：

var x = document.getElementById("url1").href;
if (x.href === "url1") {

您将href放入x变量中，然后尝试检查x变量的href - 但字符串没有href属性。 只需检查x本身即可。

其次， .href属性将返回链接的完整路径。 例如，在 Stack Snippet 中，它返回https://stacksnippets.net/url1 。 使用getAttribute代替：

 function show() { const price = document.getElementById("price"); price.textContent = price.textContent === "59€" ? "89€" : "59€"; const anchor = document.getElementById("url1"); anchor.href = anchor.getAttribute('href') === 'url1' ? 'url2' : 'url'; }

 body { font-family: arial, 'sans serif'; } .btn { background: #000; padding: 10px; color: #fff; text-decoration: none; font-family: arial, 'sans serif'; margin: 0 auto; width: 150px; display: block; text-align: center; border-radius: 10px; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; } /* Hide default HTML checkbox */ .switch input { opacity: 0; width: 0; height: 0; } /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked+.slider { background-color: #2196F3; } input:focus+.slider { box-shadow: 0 0 1px #2196F3; } input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } h3 { text-align: center; }

 <p>Click here</p> <label class="switch"> <input onclick="show()" type="checkbox"> <span class="slider round"></span> </label> <h3 class="price-presta" id="price">59€</h3> <a class="btn" id="url1" href="url1">url link button</a> <!-- url does not change on second click like the price -->

Answer 2

您已经将 url 设置为变量“x”。 所以 if 条件必须直接在字符串上而不是元素上：

//[...]
var x = document.getElementById("url1").href;
if (x === "url1") {
    document.getElementById("url1").href = "url2";
} 
//[...]

Answer 3

完美的 ！ 谢谢

只是 ！ ：“网址”？ 'url2': 'url'; VS 'url1' ？ 'url2': 'url'; :)

function show() {
  const price = document.getElementById("price");
  price.textContent = price.textContent === "59€" ? "89€" : "59€";
  
  const anchor = document.getElementById("url1");
  anchor.href = anchor.getAttribute('href') === 'url' ? 'url2' : 'url';
}

 function show() { const price = document.getElementById("price"); price.textContent = price.textContent === "59€" ? "89€" : "59€"; const anchor = document.getElementById("url1"); anchor.href = anchor.getAttribute('href') === 'url' ? 'url2' : 'url'; }

 body { font-family: arial, 'sans serif'; } .btn { background: #000; padding: 10px; color: #fff; text-decoration: none; font-family: arial, 'sans serif'; margin: 0 auto; width: 150px; display: block; text-align: center; border-radius: 10px; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; } /* Hide default HTML checkbox */ .switch input { opacity: 0; width: 0; height: 0; } /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked+.slider { background-color: #2196F3; } input:focus+.slider { box-shadow: 0 0 1px #2196F3; } input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } h3 { text-align: center; }

 <p>Click here</p> <label class="switch"> <input onclick="show()" type="checkbox"> <span class="slider round"></span> </label> <h3 class="price-presta" id="price">59€</h3> <a class="btn" id="url1" href="url1">url link button</a> <!-- url does not change on second click like the price -->