7

Segue código:

$(document).ready(function() {
  $('#1ano_card_title').text('R$20,00');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 id="1ano_card_title" class="card-title pricing-card-title">
  R$10,00
  <small class="text-muted">/ 1 ano</small>
</h2>

Já tentei dessa forma:

$('#1ano_card_title').text('R$20,00');

Porem o elemento small some. Como faço para mudar somente o valor ? Mudar de 10,00 para 20,00.

7 Respostas 7

11

Da forma como você está fazendo você está substituindo todo o conteúdo, segue abaixo um exemplo alterando só o o primeiro bloco de texto.

$(document).ready(function() {  
  $('#1ano_card_title').contents().first()[0].textContent='R$20,00';  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 id="1ano_card_title" class="card-title pricing-card-title">
  R$10,00
  <small class="text-muted">&nbsp;/ 1 ano</small>
</h2>

10

Você pode separar o valor que deseja alterar colocando dentro de um <span> e alterar o <span> ao invés do <h2>:

$('#valor').text('R$20,00');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2 id="1ano_card_title" class="card-title pricing-card-title">
    <span id="valor">R$10,00</span>
    <small class="text-muted">/ 1 ano</small>
</h2>

8

Você pode usar JavaScript puro para mudar o valor, veja:

document.getElementById('1ano_card_title').childNodes[0].nodeValue = "R$20,00";
<h2 id="1ano_card_title" class="card-title pricing-card-title">
  R$10,00
  <small class="text-muted">/ 1 ano</small>
</h2>

Tirei esta solução daqui.

6

Você pode adicionar um spam dentro do h2

$('.btn').on('click', function(){
  console.log('clique')
  $('span.valor').text('R$ 20,00');
  
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<h2 id="ano_card_title" class="card-title pricing-card-title">
  <span class='valor'>R$ 10,00</span>
  <small class="text-muted">/ 1 ano</small>
</h2>
<button class="btn btn-primary">Alterar</button>

5

Você pode armazerar o conteúdo atual do elemento <small> em uma variável e depois de alterar o conteúdo do <h1> adicionando a variável.

var ano = $("small")[0];
$('#1ano_card_title').text('R$20,00').append(ano);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 id="1ano_card_title" class="card-title pricing-card-title">
    R$10,00
    <small class="text-muted">/ 1 ano</small>
</h2>

1

HTML

< h1 id="infoMsg" >Texto antigo < /h1>

< button id="mudar">Mudar Texto < /button>

jQuery

$(document).ready(function(){
  var msg = $("Texto Novo");
  var botao = $("#mudar");
  botao.on("click", function(event){
    event.preventDefault();
    $("#infoMsg").text(msg.val());
  });
});

A tag h1 à qual o título será mudado recebe a id="infoMsg" e o botão que executará o evento de mudança recebe o id="mudar".

No Jquery a variável "msg" recebe um determinado valor (texto novo que substituirá o antigo contido na h1 de id="infoMsg") a variável botao vai receber o id contido no button id="mudar".

Por ultimo, uma função que acontecerá no momento do clique no button onde eu informo que, a id $("#infoMsg") terá o seu texto mudado pelo valor contido na variável msg msg.val().

0
-3

$('#valor').text('R$20,00');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2 id="1ano_card_title" class="card-title pricing-card-title">
    <span id="valor">R$10,00</span>
    <small class="text-muted">/ 1 ano</small>
</h2>

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 .