How to return different answers with different values in equal Classes?

Asked

Viewed 273 times

5

I have two different values that must return different answers, but the classes are equal, how to solve ?

See that the answers are wrong.

.Container-Produto{display:block;border:solic 1px #ccc;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Container-Produto">
                    <div class="Preco">99,00</div>
                    <a class="Frete-a"></a>
                    </div>  
                    
                    <div Class="Container-Produto">
                    <div class="Preco">98,00</div>
                    <a class="Frete-a"></a>
                    </div> 


<script>
         jQuery("document").ready(function($){
         $('.Preco').ready(function() {
         var preco = $('.Preco').text();
         preco = parseFloat( preco.replace( '.', '' ).replace( ',', '.'         ) );
         if( preco > 98.99 ) {
         $('.Frete-a').text( 'Frete Grátis' );
         } else {
         $('.Frete-a').text( 'Sem Frete Grátis' );
         }
         });
         });
</script>

javascript jquery

  • @Bacco has an idea how to solve it here ?

  • Just for the record, Bacco has not received notification of its above comment, Gladson. Users are only notified with @ if they have already commented on the question or answer in question.

  • 1

    In fact, I only saw why I came here to read. But the 2 answers contemplate the correct way to solve, and neither +1 in both ;)

  • Thanks @bfavaretto, now I understand how it works

  • @Bacco, ask you something, in case . next() adds return in case $(this) in the subsequent tag to ". Price", but if there are any other tags between them, how do I solve ?

  • I think it’s fundamental that you understand the selectors from jQuery, as they are the basis of what you will do. In Portuguese, I found a video here in a quick search, I don’t know if it’s good because I just watched the beginning, but try to see if you can solve it: http://vimeo.com/15991889

  • And for you to know, the next of the form that was put in the accepted answer is returning the "next . Shipping-a" and not the next tag any.

  • I tried to see all selectors today, I tested several, but I did not find one that selected the tag I want that appears the text "Free Shipping", I will see the video, thank you very much

  • @Bacco, why . find() does not work in this case, she should not find the TAG with the class I wanted ?

  • .find is to find a tag inside another tag. If you’re outside, you may need other selectors. Better to give a good effort in the study of the selectors and do more tests (cut the desired code and test it separately in a SQL Fiddle, for example), because you will always be bumping into this type of problem.

  • I’ve been in Dreamweaver here since early, not being able to even select where I want to perform the function,...

Show 6 more comments

2 answers

7

Your jQuery code is almost there, but when you work with multiple elements you have to refer to each element one by one, so you can act on each of the various elements found without influencing the rest.

You can use the this in Javascript or $(this) in jQuery. See this question to learn more.

Since you are referring to a class and not to the X element, the change occurs in all those who have the class to which you refer.

To avoid that, in jQuery you have the function .each that allows you to iterate for each element:

jQuery("document").ready(function($){

    // Por cada elemento com classe `Preco`
    $('.Preco').each(function() {

        var $this = $(this),                                    // eu
            preco = parseFloat($this.text().replace(",", ".")); // o meu valor

        // Definir o texto a usar
        var frete = ((preco > 98.99) ? '' : 'Sem ') + 'Frete Grátis';

        // Atualizar elemento a seguir a "eu"
        $this.next('.Frete-a').text(frete);
    });
});


    jQuery("document").ready(function($){

        // Por cada elemento com classe `Preco`
        $('.Preco').each(function() {

            var $this = $(this),                                    // eu
                preco = parseFloat($this.text().replace(",", ".")); // o meu valor
    
            // Atualizar elemento a seguir a "eu"
            var frete = ((preco > 98.99) ? '' : 'Sem ') + 'Frete Grátis';

            $this.next('.Frete-a').text(frete);
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="Container-Produto">
    <div class="Preco">99,00</div>
    <a class="Frete-a"></a>
</div>  

<div Class="Container-Produto">
    <div class="Preco">98,00</div>
    <a class="Frete-a"></a>
</div>

Example also available on Jsfiddle.

7


If you have multiple elements with these classes, you need to loop the set and change them one by one. You can do this with jQuery using the .each():

jQuery(document).ready(function($){
    $('.Preco').each(function() {
         var preco = $(this).text();
         preco = parseFloat( preco.replace( '.', '' ).replace( ',', '.') );
         if( preco > 98.99 ) {
             $(this).next('.Frete-a').text( 'Frete Grátis' )
         } else {
             $(this).next('.Frete-a').text( 'Sem Frete Grátis' );
         }
     });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Container-Produto">
    <div class="Preco">99,00</div>
    <a class="Frete-a"></a>
</div>  
                    
<div Class="Container-Produto">
    <div class="Preco">98,00</div>
    <a class="Frete-a"></a>
</div>

Note the other adjustments I made to your code:

  1. There is no $('.Preco').ready, used .each in place.
  2. Inside the loop, this is the div price being accessed at the moment
  3. I used .next relative to the price div to pick up the next freight anchor

Browser other questions tagged javascript jquery

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