古いクリックされた要素relをリセットする

Question

私は、古いクリックされた要素relをリセットすることに関して1つの質問があります。私はこれを作成しましたDEMO codepen.ioから

このデモでは5つのボタンがあることがわかります。次のHTMLコードのように：

<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> 

あなたがボタン1をクリックすると、このボタンrel="a"がrel="na"を変更します、あなたのデベロッパーコンソールでそれを見ることができます。他のボタンについても同様です。(2,3,4,5)

ここで私が必要とするもの。あなたは（button 1をクリックした後）button 2をクリックした場合、私は以前に変更したいrel="a"にrel="na"をクリックすると、たとえば2 rel="b"

rel="nb"に新しいクリックされたボタンを変更します。

最初のクリックボタン数1

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

およびこれと同じbutton 1は、rel="na"：

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

そのクリックボタンの数2

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

このbutton 2 REL後

はbutton 1 RELがへ

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

のようにリセットする必要がrel="nb"古いがクリックされたと同時に、

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

のようなものです

<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 1

ただ、jQueryのdata()に古いrel値を格納し、

$(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>