0
Good afternoon!
I am trying to change the text of a button whenever it is clicked. (ONCLICK) The problem? Well, apparently all buttons have the same class and I don’t have access to HTML, only WP js and css.. Is there any way I can add a specific class to make it work?
jquery code
<script>
$(window).on('click', function(){
$('a', '.price')
.text('SELECIONADO');
});
</script>
Cod HTML
<p class="price"><a href="#" class="purchase" title="Selecionar">SELECIONADO</a></p>
Important detail: I forgot that even if I solve this, I still need to complement the code so that when clicking another button, the previous one goes back to "Select" and the new one clicked with "Selected".
They all have the same line, the only difference is a "hashkkey" that comes after the class
<li class="hotel_block hotelContainer selected" hashkey="1214192">
<figure>
<p class="thumb no_image hide"></p>
<img class="thumbImageUrl" src="https://www.travelagent.com.br/uploadImages//6b36d85b-537c-4f87-a563-a51d9e49a593.jpg">
</figure>
<div class="content">
<h3 class="name">Maria do Mar Hotel |REGIÃO CENTRAL|</h3>
<p class="stars star3">
<span class="rating-foreground">
<meta itemprop="rating" content="3">
</span>
</p>
<div class="hotel_group">
<span class="easter-egg">
Id: 1214192 <br>HotelOffline - 1214192
<br>
</span>
<p class="address">
Rodovia João Paulo, 2285 - João Paulo - 88030-300
</p>
<p class="distance downtown">
6.22 km<small>A 6.22 km do centro da cidade</small>
</p>
<p class="distance airport">
13.32 km<small>A 13.32 km do aeroporto FLN- Hercilio Luz, Brasil (FLN)</small>
</p>
<p class="short-description">
Hotel econômico no bairro João Paulo a poucos quilômetros do Centro, com vista para a Baía Norte, ampla área verde, hidro externa, jardim de inverno, piscina, playground, sala de jogos, quad...
</p>
</div>
<a href="#" class="details show hotel btnhotelDetails" title="Detalhes">Detalhes</a>
<a href="javascript:void(0);" class="observation showObservations btn">Observações</a>
</div>
<div class="details boxhotelDetails masterprice"></div>
<div class="rooms_options">
<div class="room_header hide">
<ul class="tab tabRoomButtons">
<li class="itemBtnTabRoom selected">
<a href="#" class="btnTabRoom" title="Quarto 1">Quarto 1</a>
</li>
</ul>
<p class="help">
<small>Escolha uma opção de quarto para cada um dos quartos que você solicitou na pesquisa</small>
</p>
</div>
<div class="rooms_group">
<div class="room_group show">
<ul class="listRooms rooms">
<li class="roomsgroup_room price price_even selected show" roomhashkey="475601">
<label>
<input type="radio" checked="" name="room-1214192-0" class="select_btn room buy " roomhashkey="475601">
<div>
<p class="name">Standard Single </p>
<p class="services">Cafe da Manha</p>
<a href="#" class="imageRoom more_pics showImagesRoom">SELECIONADO</a>
<p class="price price-exchange" originalcurrency="BRL" displayexchangerate="undefined" originalprice="227">
R$ 227,00
</p>
<p class="priceSufixx">Diária</p>
</div>
</label>
</li>
<li class="roomsgroup_room price price_odd hide" roomhashkey="458842">
<label>
<input type="radio" name="room-1214192-0" class="select_btn room buy selected" roomhashkey="458842">
<div>
<p class="name">Standard Casal</p>
<p class="services">Cafe da Manha</p>
<p class="price price-exchange" originalcurrency="BRL" displayexchangerate="undefined" originalprice="268">
R$ 268,00
</p>
<p class="priceSufixx">Diária</p>
</div>
</label>
</li>
<li class="roomsgroup_room price price_even hide" roomhashkey="475489">
<label>
<input type="radio" name="room-1214192-0" class="select_btn room buy selected" roomhashkey="475489">
<div>
<p class="name">Standard Twin</p>
<p class="services">Cafe da Manha</p>
<a href="#" class="imageRoom more_pics showImagesRoom">SELECIONADO</a>
<p class="price price-exchange" originalcurrency="BRL" displayexchangerate="undefined" originalprice="268">
R$ 268,00
</p>
<p class="priceSufixx">Diária</p>
</div>
</label>
</li>
<li class="roomsgroup_room price price_odd hide" roomhashkey="484741">
<label>
<input type="radio" name="room-1214192-0" class="select_btn room buy selected" roomhashkey="484741">
<div>
<p class="name">Standard Triplo</p>
<p class="services">Cafe da Manha</p>
<a href="#" class="imageRoom more_pics showImagesRoom">SELECIONADO</a>
<p class="price price-exchange" originalcurrency="BRL" displayexchangerate="undefined" originalprice="335">
R$ 335,00
</p>
<p class="priceSufixx">Diária</p>
</div>
</label>
</li>
</ul>
<a href="#" class="open_rooms hotel btnSeeRooms show" title="Mostrar mais quartos">Mostrar mais quartos</a>
<a href="#" class="hide hide_rooms" title="Esconder Quartos">Esconder Quartos</a>
</div>
</div>
<p class="price">
<a href="#" class="purchase" title="Selecionar">SELECIONADO</a>
</p>
</div>
<div class="hotel_map"></div>
<div class="hotelDetailsIFrameContainer iframe"></div>
<div class="hotel_observations"></div>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable ui-resizable" tabindex="-1" role="dialog" style="display: none; position: absolute;" aria-describedby="ui-id-19" aria-labelledby="ui-id-20">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix ui-draggable-handle">
<span id="ui-id-20" class="ui-dialog-title"> </span>
<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" title="Close">
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">Close</span>
</button>
</div>
<div class="hotel_gallery ui-dialog-content ui-widget-content" id="ui-id-19" style="display: block;"></div>
<div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div>
</div>
</li>
Possible duplicate of Use Jquery to swap text
– fernandosavio
No bro... Before it was just changing the text of an element. Now I’m trying to apply what I learned in the last one, in the question of "on click" and it worked. But you changed the text of all the buttons and after you click, it never comes back...
– Gabriel Salomão
Gabriel, after you have exchanged the element text javascript overrides the previous one. You will need to change the text manually later. & #Xa;And jQuery changes the text of all elements that match the selector, if you used the class selector, example
.minha-classe, all elements with this class will change. You will have to use a more specific selector or or taper this selection manually.– fernandosavio
I get it. Since they are identical in everything, it won’t work. What is the name of the function that makes "the page up"? And to apply it I can do it the same way Sam passed me in the other quest?
– Gabriel Salomão
Sam, apparently the difference from them is the li that after the class has a "hashkey" that has a different number in each one. I believe this is not pure HTML.
– Gabriel Salomão
It’s not very clear. It has different buttons. For example, this one has only one:
<a href="#" class="purchase" title="Selecionar">SELECIONADO</a>, and this one here several:<a href="#" class="imageRoom more_pics showImagesRoom">SELECIONADO</a>– Sam