使用点击功能检查多个div中的数据属性值

Question

我正在尝试获取一组选定的div，以根据buttons data属性中的数据集更改背景色。

我做了一些挖掘，但是对于如何将条件传递给div中的标题以及按钮中data属性中的数据感到困惑。

我知道我可能必须.split()按钮中的数据，因为每个按钮有多个数据属性。 但是，然后获取该信息并再次检查div集是我想挂起来的地方。

这是我到目前为止的内容：

Codepen链接： https ：//codepen.io/ultraloveninja/pen/bmvOYB

HTML：

<section class="state-group">
  <div class="state" title="Illinois">
    <h2>Illinois</h2>
  </div>
  <div class="state" title="New Hampshire">
    <h2>New Hampshire</h2>
  </div>
  <div class="state" title="Washington">
    <h2>Washington</h2>
  </div>
  <div class="state" title="North Dakota">
    <h2>North Dakota</h2>
  </div>
  <div class="state" title="South Dakota">
    <h2>South Dakota</h2>
  </div>
  <div class="state" title="Wisconsin">
    <h2>Wisconsin</h2>
  </div>
</section>

<section class="btn-group">
  <a data-state='New Hampshire,Illinois,Wisconsin' class="region region-one" href="">Region 1</a>
  <a data-state='Illinois,Washington,North Dakota' class="region region-two" href="">Region 2</a>
  <a data-state='Washington,North Dakota,South Dakota' class="region region-three" href="">Region 3</a>
</section>

JS：

var $region = $('.region').data("state");
var $single = $region.split(',');

$(".region").on("click", function(e) {
  $(".state-group div").each(function() {
    var $state = $(this).attr("title");
    if ($state == $single ) {
      $(this).css('background-color','blue')
    }
  });
  e.preventDefault();
});

基本上，一旦您单击按钮，它将检查您单击的按钮中的数据，找到div的标题（在本例中为状态），如果匹配，则将这些特定div的背景设为蓝色。

同样，不确定我是否要采用正确的方法，或者是否需要从div中获取数据并将其存储在变量中。 希望有道理。

Answer 1

您应该从单击的按钮获取状态，而不是从js加载时获取状态。 这样您将具有基于单击按钮的状态。

$(".region").on("click", function(e) {
  //Below line is important; Otherwise it won't work for other buttons.
  var $single = $(this).data("state").split(",");

  $(".state-group div").each(function() {
    var $state = $(this).attr("title");
    if ($single.indexOf($state) > -1) {
      $(this).css('background-color','blue');
    }else{
      $(this).css('background-color','#ccc');
    }
  });
  e.preventDefault();
});

https://codepen.io/anon/pen/PyRgEZ

Answer 2

这是您需要做的：

var $region = $('.region').data("state");
var $single = $region.split(',');

$(".region").on("click", function(e) {
  $(".state-group div").each(function() {
    var $state = $(this).attr("title");

    // HERE 
    if ($single.includes($state)) {
      $(this).css('background-color','blue')
    }
  });
  e.preventDefault();
});

Answer 3

您可能不需要保留数据中每个状态的引用，而不是使用data-state并使用与相关元素的类相同的值，因此在单击时获取data-state ＆从dom中获取具有相同元素的元素上课并突出显示它们。

data-state值长度的好处不会随着新元素的增加而增加

 $(".region").on("click", function(e) { e.preventDefault(); let getDataState = $(this).data('state') $('.' + getDataState).css('background-color', 'blue') }); 

 body { padding: 20px; } .state-group { display: flex; justify-content: space-between; margin-bottom: 20px; } .state { flex: 0 1 13%; display: flex; justify-content: center; align-items: center; min-height: 200px; background: #ccc; font-size: 16px; text-align: center; padding: 10px; } .btn-group { display: flex; flex-direction: column; a { margin: 10px 0; text-decoration: none; display: block; padding: 15px 5px; background: lighten(blue, 20%); color: white; text-align: center; width: 100%; max-width: 150px; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="state-group"> <div class="state btn-1 btn-2" title="Illinois"> <h2>Illinois</h2> </div> <div class="state btn-1" title="New Hampshire"> <h2>New Hampshire</h2> </div> <div class="state btn-2 btn-3" title="Washington"> <h2>Washington</h2> </div> <div class="state btn-2 btn-3" title="North Dakota"> <h2>North Dakota</h2> </div> <div class="state btn-3" title="South Dakota"> <h2>South Dakota</h2> </div> <div class="state btn-1" title="Wisconsin"> <h2>Wisconsin</h2> </div> </section> <section class="btn-group"> <a data-state='btn-1' class="region region-one" href="">Region 1</a> <a data-state='btn-2' class="region region-two" href="">Region 2</a> <a data-state='btn-3' class="region region-three" href="">Region 3</a> </section>