Donate. I desperately need donations to survive due to my health

Get paid by answering surveys Click here

Click here to donate

Remote/Work from Home jobs

Hide selected element with smaller text value jquery

Given the code below, I want that the selected div (.box.special) with the with smaller text value have its .price-two hidden. The rule is that at least TWO divs are selected (.special). Code now is too dirty and getting worse, so I'd better get some help.

HTML:

<div class="box">
    <div class="price-one">2 R$</div>
    <div class="price-two">4 R$</div>
    <div class="price-three">45 R$</div>
</div>
<div class="box">
    <div class="price-one">8 R$</div>
    <div class="price-two">90 R$</div>
    <div class="price-three">7 R$</div>
</div>
<div class="box">
    <div class="price-one">78 R$</div>
    <div class="price-two">546 R$</div>
    <div class="price-three">33 R$</div>
</div>
<div class="box">
    <div class="price-one">12 R$</div>
    <div class="price-two">34 R$</div>
    <div class="price-three">345 R$</div>
</div>
<div class="input"></div>

JS:

$(document).ready(function(){

$(function(){

    var $divs = $('.box');
    var $priceOne = $('.price-one');
    var $priceTwo = $('.price-two');
    var $priceTwoSpecial
    var $priceThree = $('.price-three');
    var $valueFinal = [];   
    $priceTwo.each(function(){
        $valueFinal.push(parseInt($(this).text()) );
    });
    $valueFinal.sort(function(a, b){
        return a-b;
    })
    console.log($valueFinal);

    $divs.click(function(){ 
        $(this).toggleClass('special');

        var $priceTwoSpecial = $('.box.special .price-two');
        $valueDiv = parseInt($(this).find($priceTwoSpecial).text());
        $value = [];
        $priceTwoSpecial.each(function(){
            $value.push(parseInt($(this).text()) );
        });
        $value.sort(function(a, b){
            return a-b;
        }).reverse();   

        console.log($valueDiv, $value);

        if($priceTwoSpecial.length > 1 && parseInt( $(this).find($priceTwoSpecial).text()) == $value[0]) {
            $(this).find($priceTwoSpecial).hide();
            // $(this).find($priceTwoSpecial).hide();
        } else {
            $divs.find($priceTwo).show();
        };
    });

});

});

Here's the working code: https://codepen.io/pauloolivieri/pen/MzZYOe

Comments