DevStud DevStud - 7 months ago 10
Javascript Question

reset old clicked element rel

I have one question about reset old clicked element rel. I have created this DEMO from codepen.io

In this demo you can see there are 5 number of button. Like the following html codes:

<div class="item" id="a1" data-id="1" rel="a">1</div>
<div class="item" id="b1" data-id="1" rel="b">2</div>
<div class="item" id="c1" data-id="1" rel="c">3</div>
<div class="item" id="d1" data-id="1" rel="d">4</div>
<div class="item" id="e1" data-id="1" rel="e">5</div>


When you click button 1 then this button
rel="a"
will changing
rel="na"
you can see it in your developer console. Also same think for other buttons
(2,3,4,5)
.

Now what I need here. If you click
button 2
(after clicking
button 1
) I want to change previously clicked
rel="na"
to
rel="a"
and change the new clicked button 2
rel="b"
to
rel="nb"


For example:

first click button number 1

<div class="item" id="a1" data-id="1" rel="a">1</div>


and this
button 1
rel is
rel="na"
:

<div class="item" id="a1" data-id="1" rel="na">1</div>


after that click button number 2

<div class="item" id="b1" data-id="1" rel="b">2</div>


and this
button 2
rel is
rel="nb"
like

<div class="item" id="b1" data-id="1" rel="b">2</div>


at the same time the old clicked
button 1
rel need reset like

<div class="item" id="a1" data-id="1" rel="na">1</div>


to

<div class="item" id="a1" data-id="1" rel="a">1</div>


JS

$(document).ready(function(){
$("body").on("click", ".item", function(){
var dataid = $(this).attr("data-id");
var REL = $(this).attr("rel");

// Change Rel
if (['a', 'b', 'c', 'd', 'e'].indexOf(REL) !== -1) {

$('#' + REL + dataid).attr('rel', 'n' + REL);
}
});
});

Answer

Just store the old rel value in jQuery's data(), and restore it

$(document).ready(function() {
    $(document).on('click', '.item', function() {
        var dataid = $(this).attr("data-id");
        var rel    = $(this).attr("data-rel");
        var others = $(this).closest('.buttons').find('.item').not(this);

        $(this).data('_rel', rel);

        if (['a', 'b', 'c', 'd', 'e'].indexOf(rel) !== -1) {
            $('#' + rel + dataid).attr('data-rel', 'n' + rel);
        }

        others.attr('data-rel', function(_, rel) {
            return $(this).data('_rel') || rel;
        });
    });
});
.container {
   margin:0px auto;
   width:100%;
   max-width:550px;
   padding:5px;
   background-color:#d8dbdf;
   position:relative;
   overflow:hidden;
   margin-top:50px;
   border-radius:2px;
   -webkit-border-radius:2px;
}

.buttons {
   width:100%;
   overflow:hidden;
   position:relative;
}

.item {
   float:left;
   padding:10px;
   margin-right:5px;
   cursor:pointer;
}
.item:nth-child(2n+1){
   background-color:red;
   color:#ffffff;
   border-radius:2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

   <div class="buttons">
      <div class="item" id="a1" data-id="1" data-rel="a">1</div>
      <div class="item" id="b1" data-id="1" data-rel="b">2</div>
      <div class="item" id="c1" data-id="1" data-rel="c">3</div>
      <div class="item" id="d1" data-id="1" data-rel="d">4</div>
      <div class="item" id="e1" data-id="1" data-rel="e">5</div>
   </div>

</div>



<div class="container">

   <div class="buttons">
      <div class="item" id="a2" data-id="2" data-rel="a">1</div>
      <div class="item" id="b2" data-id="2" data-rel="b">2</div>
      <div class="item" id="c2" data-id="2" data-rel="c">3</div>
      <div class="item" id="d2" data-id="2" data-rel="d">4</div>
      <div class="item" id="e2" data-id="2" data-rel="e">5</div>
   </div>

</div>

Comments