In jquery write a different link in a href

Question

In jquery write a different link in a href

Navigation

#1 by (1 votes)

1

I have this HTML snippet that is called on some screens when needed (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 another link on a link. It would be something like this (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 changes to be made within that HTML, I can not put any external files or anything like this.

javascript html jquery

asked by anonymous 04.10.2018 / 16:52

1 answer

Why does ajax not work? Referencing elements with CSS to reposition them

score 1 · Accepted Answer

Considering that only the element with class 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><ahref="#" 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 commentary commented, but basically you need to capture the element, in this case I captured the class because you said that you will use only this element. After capturing the element, just capture its id attribute and verify that it is equal to the alvo attribute, in the s-j-dos-campos case, if it is, you change the url of it to whatever you want, if not , defines href as # .

I changed the% w / o of the element to id , see being printed the s-j-dos-campos saved 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><ahref="#" 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>