动态更改href并链接到url片段

Question

Hope someone can help. I'm trying to dynamically change hrefs on a page and then point the user to a url which includes a fragment as:

$(document).ready(function(){
    if (document.location.pathname.indexOf('cab2') > -1){
        document.getElementsByClassName('resourceLink').setAttribute('href','http://www.myserver.net/cab2/#linkResources');
        } else {
            document.getElementByClassName('resourceLink').setAttribute('href','http://www.myserver.net/cab/#linkResources');
        };
});

In the HTML I'm using several links like this:

<a class="resourceLink" href="" title="Link to Resources section" target="_blank">Resources</a>

What I was hoping for was the script would check what url the visitor had used to arrive at the site, either

• http://www.myserver.net/cab/ or,

• http://www.myserver.net/cab2/ and then set the appropriate hrefs to either:

• http://www.myserver.net/cab/#linkResources or,

• http://www.myserver.net/cab2/#linkResources

What happens though is the link opens up the base page (www.myserver.net/cab or cab2) and not the #fragment page.

What am I doing wrong? My thanks for your interest.

Answer 1

.getElementsByClassName() returns an HTMLCollection , not a single element. You can use .each() to iterate all .resourceLink elements, .attr() to set href attribute value

$(document).ready(function(){
   var link =  document.location.pathname.indexOf('cab2') > -1 ? "cab2" : "cab";
    $('.resourceLink')
    .each(function() {
       $(this)
       .attr('href','http://www.myserver.net/'+ link +'#linkResources')
    });
});