Question

我有三个按钮，当我点击一个按钮时，a标签上的链接发生变化

<a  class="payverlink" href="exbronzeregistrationform.php">Continue to registration</a>

<button class="goldpac">Choose Plan</button>
<button class="silverpac">Choose Plan</button>
<button class="bronzepac">Choose Plan</button>

我希望当我点击一个按钮时，它会更改.payverlink

处的链接

我试过了

function bronze()
    {
        $('.payverlink').href="exbronzeregistrationform.php";
    }
    function silver()
    {
        $('.payverlink').href="exsilverregistrationform.php";
    }

<button class="silverpac" onclick="silver()">Choose Plan</button>
<button class="bronzepac" onclick="bronze()">Choose Plan</button>

但是这会改变任何按钮的青铜功能。请问这个问题。

Answer 1

我怀疑这两个函数都失败了，因为JQuery对象上没有这样的属性href。

请改用此方法：

$('.payverlink').prop("href","exbronzeregistrationform.php");

Answer 2

你有没有尝试过jQuery的.prop（）方法呢？

function bronze()
{
    $('.payverlink').prop('href','exbronzeregistrationform.php');
}
function silver()
{
    $('.payverlink').prop('href','exsilverregistrationform.php');
}

Answer 3

您可以使用QGridLayout功能：

＆＃13;

.attr

＆＃13;

function bronze(){
  changeLink('exbronzeregistrationform');
}
function silver(){
  changeLink('exsilverregistrationform.php');
}

function changeLink(url){
  $('.payverlink').attr('href',url);
}

＆＃13;

Answer 4

＆＃13;

new Countdown({..});

＆＃13;

function bronze()
{
    $('.payverlink').attr("href","exbronzeregistrationform.php");
}
function silver()
{
    $('.payverlink').attr("href","exsilverregistrationform.php");
}

＆＃13;

你可以试试这个。它会帮助你。：）

Answer 5

您可以设置您的javascript代码以触发按钮点击，并避免使用onclick into html

$(document).ready(function() {
   $("button").on('click', function(){

       if ($(this).hasClass('goldpac')) {
           window.location="http://..."; /* or exbronzeregistrationform.php for example */
       } else if ($(this).hasClass('silverpac')) {
           window.location="http://..."; /* or exbronzeregistrationform.php for example */
       } else if ($(this).hasClass('bronzepac')) {
           window.location="http://..."; /* or exbronzeregistrationform.php for example */
       }
   });
});

您可以在每种情况下添加一行来更改标签，但不会对您的操作产生巨大影响，因为单击按钮时不会使用它。

$("a.payverlink").attr("href", "http://...."); /* or exbronzeregistrationform.php for example */

所以，你可以删除＆＃39; href＆＃39;因为你会改变js的网址。

Answer 6

使用attr或prop，attr代表属性的属性和道具！

$(
  function(){
    $('#google').attr('href', 'https://duckduckgo.com/');
    //or use prop
    $('#duckduckgo').prop('href', 'https://bing.com')
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS Learning</title>
</head>
<body>
<h1 class="header"></h1>
<a id="google" href="https://google.com/">google is down!</a>
<br>
<a id="duckduckgo" href="https://duckduckgo.com/">I'm slow...</a>
</body>
</html>

尝试使用javascript更改按钮上的链接

6 个答案: