Use Jquery to swap text

Asked

Viewed 185 times

2

Good morning!

I don’t have access to the HTML of a site I’m editing, so to make additions, I only get it via css or js. Basically I need to change a text from "service", to "Transfer" and to try with jquery in "Javascript no header", which has in WP.

I’m quite an amateur at JS so I can’t tell you where the mistake is. I’m trying to use Firebug to find problems, but at first the code doesn’t even appear in it.

It follows code as it is now

$(document).ready(function(){
    $('service').text('Transfer');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label class="service">
  <input type="checkbox" checked="checked" value="Service" id="package-service-toggle">
  <span></span>
  <p>Serviço</p>
</label>

html jquery

  • But you can see the source code and could post the snippet you want to change in the question.

  • basically won’t work, because you made a selector to search for an element of the tag "service", as if it were "table", "body" or "p", I don’t think that’s the case. If service is an id or class, you need to review the selector. Put the html so we can help

  • Follow HTML <label class="service"><input type="checkbox" checked="checked" value="Service" id="package-service-toggle"><span></span><p>Service</p></label> The ID I have to choose would then be "package-service-togglw"?

  • Add the code to the question, just click on edit

3 answers

0

The problem may be in the selector you are using. Because $("service") makes jQuery look for an element <service> in DOM, which I find unlikely to happen. See:

$('service'); // Procura por <service>
$('#service'); // Procura por <??? id="service" />
$('.service'); // Procura por <??? class="service" />

A functional example:

console.log('$("p"): ', $('p').html());   // Busca por tag
console.log('$("#p"): ', $('#p').html()); // Busca por id
console.log('$(".p"): ', $('.p').html()); // Busca por class
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<h3 id="p">id == "p"</h3>
<p>tag == "p"</p>
<div class="p">class == "p"</div>

You can check the jQuery documentation to see more selector options.

0


You’ll get it this way:

$(document).ready(function(){
    $('#package-service-toggle')
    .closest('.service')
    .find('p')
    .text('Transfer');
});

How can there be other elements with the class .service, select the id of the input, look for the parent element that has the class .service and then search for the tag <p>, that has only one:

$(document).ready(function(){
    $('#package-service-toggle')
    .closest('.service')
    .find('p')
    .text('Transfer');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="service">
  <input type="checkbox" checked="checked" value="Service" id="package-service-toggle">
  <span></span>
  <p>Serviço</p>
</label>

Or you can use Javascript pure who does the same thing:

document.addEventListener('DOMContentLoaded', function(){
   document.querySelector('#package-service-toggle')
   .parentNode.querySelector('p')
   .textContent = 'Transfer';
});

Example:

document.addEventListener('DOMContentLoaded', function(){
   document.querySelector('#package-service-toggle')
   .parentNode.querySelector('p')
   .textContent = 'Transfer';
});
<label class="service">
  <input type="checkbox" checked="checked" value="Service" id="package-service-toggle">
  <span></span>
  <p>Serviço</p>
</label>

You may need to make the change after the full load page. To do this change the $(document).ready(function(){ for $(window).on('load', function(){.

  • I haven’t yet. The code is now <script> $(Document). ready(Function(){ $('p', '.service').text('Transfer'); }); </script>

  • I changed the answer. Look now.

  • I still can’t. I’m putting it exactly like this <script> $(Document). ready(Function(){ $('#package-service-toggle') .Closest('.service') .find('p') .text('Transfer'); }); </script> In theory WP already comes with this library installed then and since I don’t have access to HTML, I just have to put this Cod using the "custom js code" block, which is where I paste it. In the case of Header.

  • Take a look at the console and see if an error appears

  • None related to this, follows the website link. Inside the page I am trying to change the search engine term "mount your trip" from "service" to "transfer". https://viagens.apino.com.br/rd-summit-2018/

  • It worked sam! Tks!

  • Blz. I will insert in the answer because it can help anyone who has the same problem. Abs!

Show 2 more comments

0

The error is that it was not well specified for jQuery which element you want to manipulate.

Therefore, as the service is a class should be placed "." inside the jQuery selector. And missed to navigate to your paragraph.

$(document).ready(function(){
    $('.service p').html('Transfer');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label class="service">
    <input type="checkbox" checked="checked" value="Service" id="package-service-toggle">
    <span></span>
    <p>Serviço</p>
</label>

Browser other questions tagged html jquery

You are not signed in. Login or sign up in order to post.