Question

qs1 = model.objects.filter(...)
print("qs1: {}".format(qs1.query)
qs2 = model.objects.filter(...)
print("qs2: {}".format(qs1.query)
qs = q1 | q2
print("qs: {}".format(qs.query)

如何更改这些类名？我试过了;

<ul>
 <li class="bearname">Smokey</li>
 <li class="bearname">Teddy</li>
</ul>

和

document.querySelectorAll('li').className = "corgitype"

但没有任何改变。 document.querySelectorAll('li').classList = "corgitype"是我要在corgitype

上覆盖的新类名

Answer 1

您需要迭代返回节点列表的查询结果 - 请注意，如果您在li上设置了多个类，则会覆盖所有类。顺便说一下 - 如果它是你想要做的唯一的样式 - 那么你可以在css-ul＆gt;中完全没有课程。 li {// css style rules}所以甚至可能不需要这些类。

编辑 - 我为此添加了一些额外的毛茸茸以允许切换类和样式 - 有点更冗长 - 但更容易看到类名更改的效果。

＆＃13;

function changeClass(value){
  var listItems = document.querySelectorAll('li');
  var index = parseInt(value);
  var type;
  index%2 == 0
   ? type = "corgitype"
   : type = "bearname"
    
  for(i=0;i<listItems.length;i++){
    listItems[i].classList= type;
   };
   document.getElementById('toggleButton').value = index+1;
}

＆＃13;

.bearname {color:blue}
.corgitype {color: red}

＆＃13;

<ul>
 <li class="bearname">Smokey</li>
 <li class="bearname">Teddy</li>
</ul>
<hr/>
<button type="button" onclick="changeClass(this.value)" value="0" id="toggleButton">Click to toggle classes</button>

＆＃13;

Answer 2

querySelectorAll返回静态集合。您需要迭代此集合，并且可以使用className来替换现有的

document.querySelectorAll('li').forEach(function(item) {
  item.className = 'corgitype';
})

.corgitype {
  color: green;
}

<ul>
  <li class="bearname">Smokey</li>
  <li class="bearname">Teddy</li>
</ul>

Answer 3

<html>
<head>
<style>
.classa {
color:red;
}
.classb {
color:blue;
}
</style>

<script>
function change() {
    var list = document.getElementsByTagName("li");
    for (var i=0; i<list.length; i++) {
    var el = list[i];
    el.classList.remove('classa') ;
    el.classList.add('classb') ;
    }
}
</script>
</head>

<body>
<li class="classa">aaa</li>
<li class="classa">bbb</li>
<button type="button" onclick="change();">change</button>
</body>

</html>

Answer 4

您可以使用jQuery来完成此任务。您必须在项目或页面中包含jQuery才能使用其功能。这样做的教程存在here。

一旦你添加了jQuery，最简单的方法就是：

$('.bearname').addClass('corgitype').removeClass('bearname');

如何更改没有ID的元素的类名？

4 个答案: