addClass / removeClass点击选择数据attr为另一个div

Question

我尝试通过数据属性向点击事件添加/删除-Class到另一个div。

当我点击TExt 2时，第一个FLAF 1显示无; DOT应该改变背景。 TExt应该与上面的FLAG和DOT元素绑定 我已经是selected和active类了。

＆＃13;

＆＃13;

  //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');
});

＆＃13;

.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;
} 

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果不使其复杂化，那就容易多了？

您必须在事件处理程序中获取data属性，然后只使用相同的数据属性定位.box

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