Palaniichuk Dmytro Palaniichuk Dmytro - 1 month ago 10
HTML Question

addClass/removeClass on click to selected data attr for another div

I try to add/remove -Class with on click event through data-attribute to another

div
.

When I click to
TExt 2
the first
FLAF 1
display none; And
DOT
should change the background. The
TExt
should be bind with
FLAG
and
DOT
elements above.

I've already the
selected
and
active
classes.


//plans secetor
var familyTariffSelected = '.boxy';
var builderCheckoutSteP = '.container .box';
var familyTariffSelectedData = $('.builder-tariff-family.selected').attr('data-selected');
var builderCheckoutStePData = $('.builder-checkout-steps .step.active').attr('data-selected');

$(familyTariffSelected).on('click', function() {
$(familyTariffSelected).removeClass('selected');
$(this).addClass('selected');
});

.container{
border: 2px black dotted;
display: flex;
justify-content: space-between;
}
.event-box{
display:flex;
margin: 20px 0;
background-color: gray;
justify-content: space-between;
}
.container .box .flag{
display:none;
}
.container .box .dot{
border: 1px solid green;
color:black;
}
.container .box.active .flag{
display: block;
background-color: green;
color:white;
}
.container .box.active .dot {
background-color: green;
color:white;
}
.boxy {
background-color: yellow;
cursor:pointer;
}

.boxy.selected {
background-color: #64B246;
}

<div class="container">
<div class="box active" data-selected="dalib-1"><p class="flag">FLAG 1</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-2"><p class="flag">FLAG 2</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-3"><p class="flag">FLAG 3</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-4"><p class="flag">FLAG 4</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-5"><p class="flag">FLAG 5</p> <span class=" dot">DOT</span></div>
</div>


<div class="event-box">
<div class="boxy" data-selected="dalib-1">TExt 1</div>
<div class="boxy" data-selected="dalib-2">TExt 2</div>
<div class="boxy" data-selected="dalib-3">Text 3</div>
<div class="boxy" data-selected="dalib-4">Text 4</div>
<div class="boxy" data-selected="dalib-5">TExt 5</div>
</div>

<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>




Answer

It's a lot easier when you don't complicate it?

You have to get the data attribute inside the event handler, and then just target the .box with the same data attribute

$('.boxy').on('click', function() {
    $('.boxy').removeClass('selected');
    $(this).addClass('selected');
    
    $('.box').removeClass('active')
             .filter('[data-selected="' + $(this).data('selected') + '"]')
             .addClass('active');
});
.container {
    border: 2px black dotted;
    display: flex;
    justify-content: space-between;
}

.event-box {
    display: flex;
    margin: 20px 0;
    background-color: gray;
    justify-content: space-between;
}

.container .box .flag {
    display: none;
}

.container .box .dot {
    border: 1px solid green;
    color: black;
}

.container .box.active .flag {
    display: block;
    background-color: green;
    color: white;
}

.container .box.active .dot {
    background-color: green;
    color: white;
}

.boxy {
    background-color: yellow;
    cursor: pointer;
}

.boxy.selected {
    background-color: #64B246;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="box active" data-selected="dalib-1">
        <p class="flag">FLAG 1</p> <span class=" dot">DOT</span></div>
    <div class="box" data-selected="dalib-2">
        <p class="flag">FLAG 2</p> <span class=" dot">DOT</span></div>
    <div class="box" data-selected="dalib-3">
        <p class="flag">FLAG 3</p> <span class=" dot">DOT</span></div>
    <div class="box" data-selected="dalib-4">
        <p class="flag">FLAG 4</p> <span class=" dot">DOT</span></div>
    <div class="box" data-selected="dalib-5">
        <p class="flag">FLAG 5</p> <span class=" dot">DOT</span></div>
</div>

<div class="event-box">
    <div class="boxy" data-selected="dalib-1">TExt 1</div>
    <div class="boxy" data-selected="dalib-2">TExt 2</div>
    <div class="boxy" data-selected="dalib-3">Text 3</div>
    <div class="boxy" data-selected="dalib-4">Text 4</div>
    <div class="boxy" data-selected="dalib-5">TExt 5</div>
</div>