代码之家 › 专栏 › 技术社区 › ultraloveninja

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

css html jquery javascript

ultraloveninja · 技术社区 · 7 年前

我已经做了一些挖掘,但是对于如何通过按钮传递div中的标题和data属性中的数据的条件,我感到困惑。

我知道我必须 .split() 由于每个按钮都有多个数据属性,因此将数据从按钮中删除。但是当我得到这些信息并再次检查这组div的时候我要挂断电话了。

以下是我目前掌握的情况:

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中获取数据并将其存储在变量中。希望这有意义。

3 回复 | 直到 7 年前

Nimitt Shah 7 年前

应该从单击的按钮获取状态,而不是在加载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

Marc M. 7 年前

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();
});

brk 7 年前

data-state &使用与相关元素的类相同的值 数据状态 &从dom中获取具有相同类的元素并高亮显示它们。

数据状态 不会随着新元素的增加而增加

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