Motsie Motsie - 3 months ago 7
Javascript Question

Looking for ways to refactor my jQuery code for a div toggle I created

I wrote some code with three things in mind:


  1. Highlighting a selection's border using 'on click'.

  2. Selecting one item will remove the highlight from the other item.

  3. The ability to deselect each item on click.



I've managed to get everything working for the most part, but I don't particularly like how complex the code is for the radial dot that appears when one item is selected.

Below is an example of what I'm talking about, particularly I'm looking for ways to refactor the code below into something a little more legible (shorter).

$(this).children('.radial').children().toggleClass('checked').parents('.itembox')
.siblings().children('.radial').children().removeClass('checked');


Here's a working example for more context (line 10):



var raceInternet = false;
var racePhone = false;
var raceTv = false;

$(function() {
var $targetDiv = $('#race-internet > .itembox');
var $radialDot = $('.radial > .center-dot');
$targetDiv.on('click', function() {
$(this).toggleClass('user-selected').siblings().removeClass('user-selected');
//Is it possible to refactor Line 10?
$(this).children('.radial').children().toggleClass('checked').parents('.itembox').siblings().children('.radial').children().removeClass('checked');
if ($targetDiv.is('.user-selected')) {
raceInternet = true;
} else {
raceInternet = false;
}
})
})

.itembox-container {
display: flex;
}
.boxes-2 {
width: calc((100% - 25px)/2);
margin: 10px;
padding: 10px;
}
.itembox {
position: relative;
display: inline-block;
border: 5px solid #e8e8e8;
border-radius: 10px;
cursor: pointer;
}
.user-selected {
border: 5px solid #E16E5B;
}
.itembox h4 {
color: #22ddc0;
font-weight: 700;
}
span.price {
display: inline-block;
font-weight: 400;
float: right;
color: #22ddc0;
}
.itembox > ul {
list-style: none;
}
.itembox > ul > li {
line-height: 3;
}
.radial {
position: absolute;
float: right;
height: 35px;
width: 35px;
padding: 2px;
border: 5px solid #e8e8e8;
border-radius: 50%;
top: 43%;
right: 10px;
}
.center-dot {
display: none;
position: relative;
height: 21px;
width: 21px;
background-color: #E16E5B;
border-radius: 50%;
}
.checked {
display: block;
}
.prime-aux:first-of-type {
top: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<!-- Primary Content Container -->
<div class="prime-aux">
<div id="race-internet" class="itembox-container">
<div class="itembox boxes-2">
<h4>Gigabit Internet <span class="price">$60/mo</span></h4>
<ul>
<li>1,000 Mbps</li>
<li>No data caps</li>
</ul>
<div class="radial">
<div class="center-dot"></div>
</div>
</div>
<div class="itembox boxes-2">
<h4>Basic Internet <span class="price">$25/mo</span></h4>
<ul>
<li>25 Mbps</li>
<li>No data caps</li>
</ul>
<div class="radial">
<div class="center-dot"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Primary Content Container End -->





View on JS Fiddle

Pat Pat
Answer

You can eliminate a lot of your jquery by just leveraging css. Typically if I want to toggle a feature, I have it either display: block; or display: none; based upon a css selector. Then I just use jQuery to toggle the parent element's class name. So for example:

.item.selected .checkmark {
  display: block;
}

.item .checkmark {
  display: none;
}

$('.item').click(function(){ $(this).toggleClass('selected') });

https://jsfiddle.net/op6yzprt/

Comments