Toggle-Klasse, Radfahren innerhalb einer Gruppe

Question

Ich entwickle eine Benutzeroberfläche mit einigen Elementen, die in zwei Gruppen unterteilt sind, links und rechts, die beim Anklicken hervorgehoben werden, indem Datenattribute auf ihnen bearbeitet werden.

Wenn beim Klicken auf ein zweites Element ein Element hervorgehoben wird, wird das erste "ausgeschaltet", so dass nur die zweite Wirkung zeigt.

This ist, wo ich so weit gekommen bin:

$('#wrapper').on('click', '.box[data-selectable="1"]', function() { 
 

 
\t var $this = $(this); 
 
    
 
    $this.attr('data-selected', ($this.attr('data-selected') == '0' ? '1' : '0')); 
 
    
 
\t $('.box').not($this).attr({ 
 
    'data-selected': '0', 
 
    'data-selectable': '1' 
 
    }); 
 
});

body { margin: 2%; } 
 

 
#wrapper { display: flex; } 
 

 
.box { 
 
    align-items: center; 
 
    border: 1px solid #000; 
 
    
 
    -webkit-box-shadow: none; 
 
      box-shadow: none; 
 
    
 
    display: flex; 
 
    height: 150px; 
 
    justify-content: center; 
 
    margin: 20px 50px 40px 50px; 
 
    
 
    -webkit-transition: box-shadow .5s linear; 
 
     -o-transition: box-shadow .5s linear; 
 
    -moz-transition: box-shadow .5s linear; 
 
     -ms-transition: box-shadow .5s linear; 
 
    -kthtml-transition: box-shadow .5s linear; 
 
      transition: box-shadow .5s linear; 
 

 
    width: 150px; 
 
} 
 

 
.box[data-selected="1"] { 
 
    -webkit-box-shadow: -1px 0px 20px 16px rgba(255, 0, 0, 0.8); 
 
      box-shadow: -1px 0px 20px 16px rgba(255, 0, 0, 0.8); 
 

 
    -webkit-transition: box-shadow .5s linear; 
 
     -o-transition: box-shadow .5s linear; 
 
     -moz-transition: box-shadow .5s linear; 
 
     -ms-transition: box-shadow .5s linear; 
 
    -kthtml-transition: box-shadow .5s linear; 
 
      transition: box-shadow .5s linear; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 

 
    <div id="a"> 
 
    <div class="box" data-offset="1" data-selected="0" data-selectable="1">1</div> 
 
    <div class="box" data-offset="2" data-selected="0" data-selectable="1">2</div> 
 
    </div> 
 
    
 
    <div id="b"> 
 
    <div class="box" data-offset="3" data-selected="0" data-selectable="0">3</div> 
 
    <div class="box" data-offset="4" data-selected="0" data-selectable="0">4</div> 
 
    </div> 
 
</div>

Sieht gut aus, wenn nicht, weil bei der Auswahl eines Elements aus der ersten Gruppe (Spalte) ein Element der zweiten Gruppe kann (und muss) auch ausgewählt werden, wenn also AJAX-Aufrufe getätigt werden, werden die Daten zweier Elemente gesendet.

Es ist eine einfache Regel, immer eine von der linken Seite und eine von der rechten Seite. Wenn es hilft, denken Sie darüber nach wie ein Memory-Spiel, nur durch Spalten beschränkt.

Und das, wo ich stecken bin, wie ich sie nicht unterscheiden kann.

Answer 1

Wickeln Sie sie in 2 separate Gruppen (z. B. divs) und initiieren Sie Ihr jquery-Skript für jeden von ihnen. Stellen Sie sicher, dass Sie es im Rahmen Ihrer Gruppe "ausleuchten". Sie können .parent() für immer zu Ihrem Gruppenelement statt globale Suche (".box") verwenden: $this.parent().find('.box').not($this) oder Sie verwenden können '.siblings()': $this.siblings().not($this)

https://jsfiddle.net/e5ykucte/3/

Für unterscheiden Zweck, Sie können das Attribut id von Ihrem übergeordneten Gruppenelement verwenden.

$this.parent().attr('id') 

https://jsfiddle.net/e5ykucte/4/

Einfach Zustand hinzufügen, basierend auf den ersten Gruppennamen (möglicherweise Änderungen vorbehalten):

var currentGroup = $this.parent().attr('id'); 
    if (currentGroup == 'a' && $this.attr('data-selected') == "0") { 
     $("div#b .box").attr({ 
     'data-selectable': '0', 
     'data-selected': '0', 
     }); 
    } else { 
    $(".box").not($this).attr({ 
     'data-selectable': '1' 
    }); 
    } 

https://jsfiddle.net/e5ykucte/6/