javascript - 根据 div 的某些值填充 div

Question

我有一个网页，其中有多个 div 在 forloop (wsgi-python) 中创建和填充。我的 javascript 仅更改第一个 div，不会进一步处理。如何让它在网页上的所有div上发生？

https://jsbin.com/taximawino/edit?html,output

Answer 1

id 应该是唯一的，因此如果需要选择多个元素，可以使用 class 代替，然后使用 data-value 属性代替value 属性，因为这是添加自定义属性的正确方法，您可以使用 data('value') 访问它。然后您可以使用 each() 迭代 jQuery 选定的元素。 并使用 prev() 选择上一个元素

$(document).ready(function() {
  // var mb = $('#state').text();
  $('.state').each(function() {
    var mb = $(this).data('value');
    if (mb == 1) {
      $(this).prev().addClass("circleb");
    } else if (mb == 2) {
      $(this).prev().addClass("circlec");
    }
  });
});

div.circlea {
  background-color: #d0e4fe;
  width: 15px;
  height: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}
div.circleb {
  background-color: #66FF99;
  width: 15px;
  height: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}
div.circlec {
  background-color: #FFCCCC;
  width: 15px;
  height: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <div class="demo" class="circlea"></div>
  <div class="state" data-value="1"></div>
</div>
<div>
  <div class="demo" class="circlea"></div>
  <div class="state" data-value="2"></div>
</div>