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

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

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

我知道我可能必须

.split（）

从按钮中取出数据，因为每个按钮都有多个数据属性。但是当我得到这些信息并再次检查这组div时，我想我会被挂断

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

代码笔链接：

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>

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

以下是您需要做的事情：

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

---

以下是您需要做的：

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

---

您应该从单击的按钮获取状态，而不是在加载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();
});

---

您应该从单击的按钮获取状态，而不是在加载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();
});

---

您可能不需要在数据中保留每个状态的引用，而不是使用

数据状态

&使用与相关元素的类相同的值。因此，单击从dom获取

数据状态

&获取具有相同类的元素并高亮显示它们

数据状态

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

$（.region”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
让getDataState=$（this.data（'state'））
$（'..+getDataState）.css（'背景色'，'蓝色'）
});
正文{
填充：20px；
}
.国家集团{
显示器：flex；
证明内容：之间的空间；
边缘底部：20px；
}
.州{
弹性：0113%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
最小高度：200px；
背景：#ccc；
字体大小：16px；
文本对齐：居中；
填充：10px；
}
.btn组{
显示器：flex；
弯曲方向：立柱；
a{
利润率：10px0；
文字装饰：无；
显示：块；
填充：15px 5px；
背景：浅色（蓝色，20%）；
颜色：白色；
文本对齐：居中；
宽度：100%；
最大宽度：150px；
}
}

伊利诺伊州
新罕布什尔州
华盛顿
北达科他州
南达科他州
威斯康星州
您可能不需要在数据中保留每个状态的引用，而不是使用
数据状态
&使用与相关元素的类相同的值。因此，单击从dom获取
数据状态
&获取具有相同类的元素并高亮显示它们

数据状态
值长度的好处不会随着新元素的增加而增加


$（.region”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
让getDataState=$（this.data（'state'））
$（'..+getDataState）.css（'背景色'，'蓝色'）
});
正文{
填充：20px；
}
.国家集团{
显示器：flex；
证明内容：之间的空间；
边缘底部：20px；
}
.州{
弹性：0113%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
最小高度：200px；
背景：#ccc；
字体大小：16px；
文本对齐：居中；
填充：10px；
}
.btn组{
显示器：flex；
弯曲方向：立柱；
a{
利润率：10px0；
文字装饰：无；
显示：块；
填充：15px 5px；
背景：浅色（蓝色，20%）；
颜色：白色；
文本对齐：居中；
宽度：100%；
最大宽度：150px；
}
}

伊利诺伊州
新罕布什尔州
华盛顿
北达科他州
南达科他州
威斯康星州
啊哈！好的，我现在明白了。是的，我在点击按钮的时候就开始测试了，但是我不确定我需要在什么时候存储状态数据的变量，这样我就可以把它传回条件数据库。但这很有效，谢谢！啊哈！好的，我现在明白了。是的，我在点击按钮的时候就开始测试了，但是我不确定我需要在什么时候存储状态数据的变量，这样我就可以把它传回条件数据库。但这很有效，谢谢！