Question

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

我已经做了一些挖掘，但是对于如何将条件传递给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的背景设为蓝色。 / p>

同样，不确定我是否要以正确的方式进行操作，还是不确定是否需要从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>

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

3 个答案: