如何在onClick时将自定义href设置为按钮？

Question

I have a URL

http://localhost:8080/BIM/teacher/reports/section-exercise/assignment?x=1&y=2&z=3

I have 2 btns

I'm not sure how would I bind those 2 btn to the correct URL.

If the Remediation is clicked, I want to set the href to

http://localhost:8080/BIM/teacher/reports/section-exercise/remediation?x=1&y=2&z=3

The only different is the 4th segment, the rest stay the same.

Any helps / suggestions on them will be much appreciated !

I guess - I might have to :

• grab the whole URL
• re-construct the newURL, store it in a variable
• bind that newURL to my btn.

I hope I'm in the right track for this. Let me know if you guys, notice something.

Answer 1

$(/*remediation button selector*/).click(function() {
    $(/*assignment performance button selector*/).attr('href', 'http://localhost:8080/BIM/teacher/reports/section-exercise/remediation?x=1&y=2&z=3');
});

I'm not sure if you meant you want the Remediation button to change the href for the first button, or if you want them to just have different hrefs; if it's the latter, they can just have the different hrefs directly in the HTML, no JS needed.

Answer 2

Here you can change the URL to what ever you like. I am using Replace fucntion to change the URL on the fly

var url='http://localhost:8080/BIM/teacher/reports/section-exercise/assignment?x=1&y=2&z=3'

$('button1').click(function() {
    $(this).attr('href', url);
});
$('button2').click(function() {
    $(this).attr('href', url.replace('assignment','remediation');
});

Answer 3

Aminas answer is good, but in case the first URL isn't always the same I would recommend this function (using Regex) to change only the file name of an URL:

function changeFileName(strURL, strNewName) {
    return strURL.replace(/[^\/?]*(?=\?|$)/, strNewName);
}

This (a) works no matter what the original file name was, and (b) won't cause problem if the path contains the file name.