Question

我试图在点击时更改Div类。我目前正在尝试做什么：

我在我的div上得到了这个：

onclick"changeClass()"

这是我的功能

function changeClass(){
    $("#test123").attr("class", "classname");
}

然而它无法正常工作。您现在应该使用带有foreach循环的Id test123生成许多div，这可能是问题但我不确定

Answer 1

您忘记了=：

onclick="changeClass()"

另外，您需要指定哪个？

onclick="changeClass(this)"

然后在代码中：

function changeClass(which) {
    $(which).attr("class", "classname");
}

而不是所有这些，因为你使用的是jQuery，你可以用一种简单的方式来实现：

$(function () {
  $("div").click(function () {
    this.className = "classname";
  });
});

.classname {
  background: #ccf;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test1">Test 1</div>
<div id="test2">Test 2</div>
<div id="test3">Test 3</div>
<div id="test4">Test 4</div>

如果你想要多个类，最好添加和删除类。

$(function () {
  $("div").click(function () {
    $(this).addClass("classname");
  });
});

.classname {
  background: #ccf;
}
.myClass {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test1">Test 1</div>
<div id="test2" class="myClass">Test 2</div>
<div id="test3">Test 3</div>
<div id="test4" class="myClass">Test 4</div>

这样，它不会影响以前的类。

Answer 2

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/onclick

的onclick
      输入：脚本代码
      单击对象时将调用此事件处理程序。

实施例
  ＆LT; image src =“hello.png”onclick =“alert（'Hi'）”/＆gt;

如上所述，它应该写成onclick=foo(args)

changeClass = function(){
  document.querySelector("div").setAttribute('class', 'black');
}

.red {
background: red;
}
.black {
background: black;
}

<div class="red" onclick="changeClass()">
  lorem
</div>
<br>
<button onclick="changeClass()">click me to change class</button>

点击即可更改Div Class

2 个答案: