0

Estou com uma dúvida simples.
Tenho um slide rolando no site e as setas dele são:

<li><a class="flex-next" href="#">next</a></li>

<li><a class="flex-back" href="#">back</a></li>

Preciso adicionar via JavaScript uma classe e um link para que quando clicado passe a imagem e role até o topo do slide, ficando assim:

<li><a class="flex-next js-smooth-scroll" href="#topo">next</a></li>

<li><a class="flex-back js-smooth-scroll" href="#topo">back</a></li>

preciso adicionar via JavaScript a classe js-smooth-scroll e o link #topo.

1

3 Respostas 3

1

Você não especificou como quer que a classe e o link sejam adicionados, então simulei ao click do botão a adição dos mesmos:

var next = document.getElementsByTagName('a')[0];
var back = document.getElementsByTagName('a')[1];
var btn = document.getElementsByTagName('button')[0];

btn.onclick = function() {
  next.className += ' js-smooth-scroll';
  back.className += ' js-smooth-scroll';
  next.setAttribute('href','#topo');
  back.setAttribute('href','#topo');

  console.log(next)
  console.log(back)
}
<button>Adicionar</button>

<li><a class="flex-next" href="#">next</a></li>

<li><a class="flex-back" href="#">back</a></li>

2
  • Queria adicionar a classe e o link ancora direto mesmo sem precisar clicar em nada pois ñ tenho acesso ao html das setas ela é gerada separada, é 1 tema de wordpress. Teria como usar a classe flex-next e flex-back pra add a classe e link? no seu exemplo vc usou a var next e var back. é q o tema gera um icone svg veja:<li><a class="flex-next" href="#"><i><svg viewBox="0 0 512 512"><path d="M144 505.6c84 8 22.4 8z"></path></svg></i></a></li> Commented 19/10/2018 às 0:24
  • Para já adicionar a classe e o link basta colocar a função no método onload ficando assim document.onload = function() {... e quanto a segunda questão eu estou usando a variáveis pegando a tag a, mas, se quiser pode pegar pela classe assim document.getElementsByClassName('flex-next'), mas de qualquer jeito terá que utilizar variáveis para as operações dentro da função.
    – LeAndrade
    Commented 19/10/2018 às 19:42
0

Se for possível manipular seu html e adicionar um evento de click nele (e considerando que você não pode usar o JQuery), ficaria assim:

<li><a class="flex-next" href="#" onclick="mudarParaTopo(this)">next</a></li>

function mudarParaTopo(e) { 
    e.setAttribute("class","flex-next js-smooth-scroll");
    e.setAttribute("href","#topo");
}
0

Tente desse jeito:

//
// Adiciona a classe
//
function addSlide() {
    var element = document.getElementById("next");
    element.classList.toggle("minhaclass");
} 

//
//Remove a classe
//

function removeSlide() {
    var element = document.getElementById("back");
    element.classList.remove("minhaclass");
}
<li><a class="flex-next js-smooth-scroll"
       href="#topo" id="next" onclick="addSlide()">next</a></li>

<li><a class="flex-back js-smooth-scroll"
       href="#topo" id="back" onclick="removeSlide()">back</a></li>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .