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
Post a Comment