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>

根据div的某个值填充div

1 个答案: