0

Olá, gostaria da ajuda de vocês em um problema que não encontrei a solução. Eu tenho esse código: (exemplo)

.cifra.mono, .cifra.mono pre {
    font: 12pt 'Roboto Mono', monospace;
}
.c_config span {
    display: block;
}	
.c_config a {
    color: #F60;
}
a {
    text-decoration: none;
    outline: none;
}
.cifra b {
    color: #F60;
    font-weight: bold;
    font-family: 'Roboto Mono', 'Courier New', 'Courier', monospace;
}
strong, b {
    font-weight: bold;
}
<section class="cifra mono">
  <div class="c_config">
    <span>Tom: <a href="#">G</a></span>
    <span></span>
    <span></span>
  </div>
  <div itemprop="description">
<pre>     <b>G</b>          <b>D</b>
Parabéns pra você
               <b>G</b>
Nesta data querida
              <b>C</b>
Muitas felicidades
       <b>D</b>        <b>G</b>
Muitos anos de vida
    <b>G</b>
Muitos anos de vida
</pre></div></section>

E eu gostaria de saber como eu poderia adicionar esse style ao clicar em um botão:

b {
  display: none;
  }

Resumindo tudo, gostaria de saber como ocultar os elementos que estão dentro de <b></b> ao clicar em um botão.

4 Respostas 4

2

$(document).ready(function() {
  $("span:first").on("click", function() {
    $("b").css("display","none");
  })
})
.cifra.mono, .cifra.mono pre {
    font: 12pt 'Roboto Mono', monospace;
}
.c_config span {
    display: block;
}	
.c_config a {
    color: #F60;
}
a {
    text-decoration: none;
    outline: none;
}
.cifra b {
    color: #F60;
    font-weight: bold;
    font-family: 'Roboto Mono', 'Courier New', 'Courier', monospace;
}
strong, b {
    font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="cifra mono">
  <div class="c_config">
    <span>Tom: <a href="#">G</a></span>
    <span></span>
    <span></span>
  </div>
  <div itemprop="description">
<pre>     <b>G</b>          <b>D</b>
Parabéns pra você
               <b>G</b>
Nesta data querida
              <b>C</b>
Muitas felicidades
       <b>D</b>        <b>G</b>
Muitos anos de vida
    <b>G</b>
Muitos anos de vida
</pre></div></section>

0

Amigo adiciona um atributo id na sua tag e dê um nome a ele:

<b id"teste"></b>

Após isso você poderá mudar o estilo do seu botão com jquery:

$('#teste').on('click', () => {
  $(#teste).css('display', 'none');
});

Espero ter ajudado.

2
  • Recomendo utilizar $(this) para referenciar o próprio objeto. Commented 30/05/2018 às 18:44
  • Verdade, mas já tive alguns problemas com scopo de função aí prefiro referenciar assim mesmo. Commented 30/05/2018 às 19:33
0

Você pode usar JavaScript para isso. É só criar um botão que ao ser clicado irá chamar uma função que seleciona todos os <b> dentro da div e adiciona o display: none:

function ocultaB(){
    var bs = document.querySelectorAll("div[itemprop='description'] b");
    for(var x=0; x<bs.length; x++) bs[x].style.display = "none";
}
.cifra.mono, .cifra.mono pre {
    font: 12pt 'Roboto Mono', monospace;
}
.c_config span {
    display: block;
}	
.c_config a {
    color: #F60;
}
a {
    text-decoration: none;
    outline: none;
}
.cifra b {
    color: #F60;
    font-weight: bold;
    font-family: 'Roboto Mono', 'Courier New', 'Courier', monospace;
}
strong, b {
    font-weight: bold;
}
<button onclick="ocultaB()">Clique para Esconder</button>
<section class="cifra mono">
  <div class="c_config">
    <span>Tom: <a href="#">G</a></span>
    <span></span>
    <span></span>
  </div>
  <div itemprop="description">
<pre>     <b>G</b>          <b>D</b>
Parabéns pra você
               <b>G</b>
Nesta data querida
              <b>C</b>
Muitas felicidades
       <b>D</b>        <b>G</b>
Muitos anos de vida
    <b>G</b>
Muitos anos de vida
</pre></div></section>

0

Pra ter um efeito de ativar e desativar

$(document).ready(function() {
  var toggle = true;
  $("span:first").on("click", function() {
    if(toggle == true){
       $("b").css("display","none");
       toggle = false;
    }else{
       $("b").css("display","inline");
       toggle = true;
    }
  })
})
.cifra.mono, .cifra.mono pre {
    font: 12pt 'Roboto Mono', monospace;
}
.c_config span {
    display: block;
}	
.c_config a {
    color: #F60;
}
a {
    text-decoration: none;
    outline: none;
}
.cifra b {
    color: #F60;
    font-weight: bold;
    font-family: 'Roboto Mono', 'Courier New', 'Courier', monospace;
}
strong, b {
    font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="cifra mono">
  <div class="c_config">
    <span>Tom: <a href="#">G</a></span>
    <span></span>
    <span></span>
  </div>
  <div itemprop="description">
<pre>     <b>G</b>          <b>D</b>
Parabéns pra você
               <b>G</b>
Nesta data querida
              <b>C</b>
Muitas felicidades
       <b>D</b>        <b>G</b>
Muitos anos de vida
    <b>G</b>
Muitos anos de vida
</pre></div></section>

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 .