In jquery write a different link in a href

Asked

Viewed 258 times

1

I have this HTML snippet that is called on some screens when necessary (clicking it opens an iframe inside the HTML):

<a href="#" class="tour-360" id="tour-360-{{unit.hash}}" data-toggle="modal" data-target="#modal-tour-360">
    <h3 class="title-360">
        360º Tour {{ unit.title }}
        <small>Visualize sua unidade</small>
    </h3>
</a>

Depending on {{Unit.hash}}, instead of being href="#" and opening this iframe, I need to take the user to an external URL, open a link in another tab. It would be something like that(just a non-functional example to explain):

<script type="text/javascript">
    var url360 = '#';
    if('{{unit.hash}}' == 's-j-dos-campos'){
        url360 = 'https://www.aurlqueeuquiser.com';
    }
</script>
<a href="<script type="text/javascript"> alert(url360); </script>" class="tour-360" id="tour-360-{{unit.hash}}" data-toggle="modal" data-target="#modal-tour-360">
    <h3 class="title-360">
        360º Tour {{ unit.title }}
        <small>Visualize sua unidade</small>
    </h3>
</a>

How to do it? I need all the change to be done inside this HTML, I can’t put external files or anything like that.

javascript html jquery

  • It will only be done with that element that has the class tour-360 ?

  • That, just his link that changes

  • Vc can change attributes with jQuery this way: $(".tour-360").attr("href", url360);

1 answer

1


Whereas only the class element tour-360 will be the target, you can do something like this:

let element = $('.tour-360'), //pega o elemento pela classe
    idElement = element.attr("id"); //pega o id do elemento

if(idElement == 'tour-360-s-j-dos-campos') { //verifica se o id é = o pretendido
     element.attr('href', 'https://www.aurlqueeuquiser.com');
     console.log(element.attr("href"))
} else {
  element.attr('href', '#');
  console.log(element.attr("href"))
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="tour-360" id="tour-360-{{unit.hash}}" data-toggle="modal" data-target="#modal-tour-360">
    <h3 class="title-360">
        360º Tour {{ unit.title }}
        <small>Visualize sua unidade</small>
    </h3>
</a>

I left the comment, but basically you need to capture the element, in this case I captured by the class because you informed that use only this element. After capturing the element, simply capture its attribute id and check that it is equal to the attribute alvo, in the case s-j-dos-campos, if it is, you change the url of the same for which you wish, if not, defines the href as #.

I changed the id of the element to s-j-dos-campos, see being printed to url recorded in the element:

let element = $('.tour-360'), //pega o elemento pela classe
    idElement = element.attr("id"); //pega o id do elemento

if(idElement == 'tour-360-s-j-dos-campos') { //verifica se o id é = o pretendido
     element.attr('href', 'https://www.aurlqueeuquiser.com');
     console.log(element.attr("href"))
} else {
  element.attr('href', '#');
  console.log(element.attr("href"))
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="tour-360" id="tour-360-s-j-dos-campos" data-toggle="modal" data-target="#modal-tour-360">
    <h3 class="title-360">
        360º Tour {{ unit.title }}
        <small>Visualize sua unidade</small>
    </h3>
</a>

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.