Question

我有三个div，每个div中都有一个链接，单击链接时，我希望所有三个div的类名都根据单击哪个链接而更改。

每个div的类名均为w-33（这使div的宽度增加了33％），我需要将div的类更改为w-60和w-20。

我有它，所以当单击链接时，类名会更改，但这只是使第一个div带60，而另两个带20，无论单击哪个div链接，我都不知道是否有一个一种更有效的方法，使包含被单击链接的div可以获取w-60类名，而不是为每个链接创建三个独立的函数，因此能提供帮助。

这是onclick之前的三个div

<div class="w-33" id="first-project">
<a class="learn-more" onclick="changeclass()">Learn More</a>
</div>
<div class="w-33" id="second-project">
<a class="learn-more" onclick="changeclass()">Learn More</a>
</div>
<div class="w-33" id="third-project">
<a class="learn-more" onclick="changeclass()">Learn More</a>
</div>

这是JavaScript

function changeclass() {
var NAME = document.getElementById("first-project")
NAME.className="w-60 ml-100 mp-100 project"

var NAME = document.getElementById("second-project")
NAME.className="w-20 ml-100 mp-100 project"

var NAME = document.getElementById("third-project")
NAME.className="w-20 ml-100 mp-100 project"
}

这是onclick之后的三个div

<div class="w-60" id="first-project">
<a class="learn-more" onclick="changeclass()">Learn More</a>
</div>
<div class="w-20" id="second-project">
<a class="learn-more" onclick="changeclass()">Learn More</a>
</div>
<div class="w-20" id="third-project">
<a class="learn-more" onclick="changeclass()">Learn More</a>
</div>

因此，如果单击第一个div中的链接，则需要它，其类名称将更改为w-60，而其他两个类将更改为w-20。如果单击第二个div中的链接，则第一个和最后一个类将更改为w-20，第二个更改为w-60，如果单击第三个div的链接，则该类将为获取w-60类别名称的div

Answer 1

嘿，您可以借助这样的参数来做到这一点

<div class="w-33" id="first-project">
<a class="learn-more" onclick="changeclass(1)">Learn More</a>
</div>
<div class="w-33" id="second-project">
<a class="learn-more" onclick="changeclass(2)">Learn More</a>
</div>
<div class="w-33" id="third-project">
<a class="learn-more" onclick="changeclass(3)">Learn More</a>
</div>

function changeclass(div_number) {
if(div_number==1)
{
document.getElementById("first-project").className="w-60 ml-100 mp-100 project";
document.getElementById("second-project").className="w-20 ml-100 mp-100 project";
document.getElementById("third-project").className="w-20 ml-100 mp-100 project";
}
if(div_number==2)
{
document.getElementById("second-project").className="w-60 ml-100 mp-100 project";
document.getElementById("first-project").className="w-20 ml-100 mp-100 project";
document.getElementById("third-project").className="w-20 ml-100 mp-100 project";
}

}

Answer 2

您可以将事件传递给函数，这将使您可以定位所单击的元素。因此，在您的内联js中，它将为onclick="changeClass(event)。然后该函数将如下所示：

    function changeClass(event) {
      // Set all elements classes to their defaults.
      document.getElementById("first-project").classList = ['w-20', 'project'];
      document.getElementById("second-project").classList = ['w-20', 'project'];
      document.getElementById("third-project").classList = ['w-20', 'project'];

      // Set new classes to the clicked element only
      event.target.classList = ['w-60', 'project'];
    }

Answer 3

您可以这样做

<div class="projects">
    <div class="w-33" id="first-project">
        <a class="learn-more" onclick="changeclass(this)">Learn More</a>
    </div>
    <div class="w-33" id="second-project">
        <a class="learn-more" onclick="changeclass(this)">Learn More</a>
    </div>
    <div class="w-33" id="third-project">
        <a class="learn-more" onclick="changeclass(this)">Learn More</a>
    </div>
</div>

<script>
    function changeclass(elem) {
        let allDivs = document.querySelectorAll('.projects > div');
        for(let oneDiv of allDivs) {
            oneDiv.className = "w-20";
        }
        elem.parentNode.className = "w-60";
    }
</script>

Answer 4

这就是我要怎么做。我会在css文件的类中定义css样式-

例如

.selected{
    color: white;
    background: steelblue;
}

我是我的JS-

var resetButton = document.getElementById("reset");

现在为了将css类应用于某个元素，我会做-

resetButton.classList.add("selected");

或现在，为了将css类删除到元素中，我会做-

resetButton.classList.remove("selected");

或直接切换

resetButton.toggleClass("selected");

Answer 5

您可以使用CSS选择器“ adjacent”（“。hilight + div” =选择“ .hilight”的所有邻居div）

function hilight (hilightID) {
   var allDivs = document.getElementsByClassName('w-33');
   for (i = 0; i < allDivs.length; i++) {
     const theDiv = allDivs[i];
     const isHilight = theDiv.id === hilightID;
     
     if (isHilight) {
       theDiv.classList.add("hilight");
     } else {
       theDiv.classList.remove("hilight");
     }
   }
 }

.container { display: flex; }
.container > div { background: salmon; }

.w-33 { width: 33%; }
.hilight { width: 60%; }
.hilight + div { width: 20%; }

<div class="container">
  <div class="w-33" id="first-project">
      <a class="learn-more" onclick="hilight('first-project')">Learn More</a>
    </div>
    <div class="w-33" id="second-project">
      <a class="learn-more" onclick="hilight('second-project')">Learn More</a>
    </div>
    <div class="w-33" id="third-project">
      <a class="learn-more" onclick="hilight('third-project')">Learn More</a>
    </div>
</div>

Answer 6

我的解决方案。将事件传递给函数，并将w-60类添加到当前元素。

function changeClass(event) {
  document.querySelectorAll('.project').forEach(el => {
    el.classList.remove('w-60');
    el.classList.add('w-20')
  })
  let cls = event.target.parentNode.classList
  cls.remove('w-20');
  cls.add('w-60');
}

#group {
  font-size: 26px;
  margin: 0px;
  display: flex;
}

.w-60,
.w-20,
.w-33 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
   border: 4px solid red;
  transition:all .5s;
}

.w-33 {
  width: 33%;
}

.w-60 {
  width: 60%;
  background: beige;
}

.w-20 {
  width: 19.4%;
  background: lightpink;
}

<div id="group">
  <div class="w-33 project" id="first-project">
    <a class="learn-more" onclick="changeClass(event)">Learn More</a>
  </div>
  <div class="w-33 project" id="second-project">
    <a class="learn-more" onclick="changeClass(event)">Learn More</a>
  </div>
  <div class="w-33 project" id="third-project">
    <a class="learn-more" onclick="changeClass(event)">Learn More</a>
  </div>
</div>

使用onlick更改div类名称，更改3个div，具体取决于单击哪个链接div的链接

6 个答案: