javascript - 重置旧的点击元素rel

Question

我有一个关于重置旧的点击元素相关的问题。我创建了这个 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 2(点击 button 1 之后)，我想将之前点击的 rel="na" 更改为 rel="a" 并将新单击的按钮 2 rel="b" 更改为 rel="nb"

例如:

首先点击 1 号按钮

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

这个按钮 1 rel 是 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>

这个按钮 2 rel 是 rel="nb" 就像

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

同时旧的点击按钮1 rel需要重置，例如

<div class="item" id="a1" data-id="1" rel="na">1</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

只需将旧的 rel 值存储在 jQuery 的 data() 中，然后恢复它

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