Change information with JS-JQUERY

Question

I am trying to change a certain value within my html code, through JS-JEQUERY, but this not changing, my logic is wrong ?

Follows the code:

var valor = "texto";
$('.botao botao-comprar principal grande desativo with-popover').on('click', function () {
   
   $(this).data('data-content', valor);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:;" class="botao botao-comprar principal grande desativo with-popover" rel="popover" data-placement="left" data-trigger="hover" data-content="Selecione uma opção de atributo disponível." data-original-title="IMPORTANTE">
  <i class="icon-shopping-cart"></i> Comprar
</a>

Answer 1

If I understand correctly, you’re trying to manipulate the attribute date button. Then in the case as you have already used the method data you don’t have to write inside it data-content, but yes only content, tbm to manipulate an HTML element does not need to put all existing classes in it, only the first one is enough, if the class is unique, otherwise put a specific type $('.boot-buying') or use a id $(#button):

var valor = "texto";
$('.botao').on('click', function () {
   
   $(this).data('content', valor);

   console.log('O data-content agora é: ' + $('a').data('content'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:;" class="botao botao-comprar principal grande desativo with-popover" rel="popover" data-placement="left" data-trigger="hover" data-content="Selecione uma opção de atributo disponível." data-original-title="IMPORTANTE">
  <i class="icon-shopping-cart"></i> Comprar
</a>