javascript - 根据现有类名更改类名

Question

我有一个函数可以在单击按钮时更改 3 个 div 的类名，并且需要它以便在再次单击按钮时类名变回原样。所有三个 div 都有类名 w-33，单击的 div 按钮将该 div 的名称更改为 w-60，另外两个更改为 w -20.

我假设那里需要另一个 if()，我试过这个:

var fp = document.getElementById("first-project");
if (fp.classList.contains("w-60")) {}

但我不知道如何正确地做到这一点，所以这似乎没有用。

这是 HTML:

<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";
        document.getElementById("second-project").className="w-20";
        document.getElementById("third-project").className="w-20";
    }

    if(div_number==2) {
        document.getElementById("first-project").className="w-20";
        document.getElementById("second-project").className="w-60";
        document.getElementById("third-project").className="w-20";
    }

    if(div_number==3) {
        document.getElementById("first-project").className="w-20";
        document.getElementById("second-project").className="w-20";
        document.getElementById("third-project").className="w-60";
    }
}

这是点击第一个 div 链接后的 HTML:

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

我需要它，所以如果当 first-project 的类名已经是 w-60 时再次单击 div 编号 1，那么所有三个 div 的类名应该变回 w-33，基本上反转函数正在做的事情。

Answer 1

通过向每个 div 添加一个 button 类，您不再需要 id 属性:

<div class="button w-33">
  <a onClick="toggleClass(event)" href="#">Learn More</a>
</div>
<div class="button w-33">
  <a onClick="toggleClass(event)" href="#">Learn More</a>
</div>
<div class="button w-33">
  <a onClick="toggleClass(event)" href="#">Learn More</a>
</div>

然后使用 JavaScript:

function toggleClass(event) {

  event.preventDefault();

  // Get the clicked link parent div
  var element = event.target.parentNode;

  // Get all buttons
  var buttons = document.querySelectorAll('.button');

  // If the clicked button has the w-33 or the w-20 class
  if(element.classList.contains('w-33') || element.classList.contains('w-20')) {

    // Change class to w-60
    element.classList.remove('w-33', 'w-20');
    element.classList.add('w-60');

    // Leave every other button with the w-20 class
    buttons.forEach(function(button) {
      if(button != element) {
        button.classList.remove('w-33', 'w-60');
        button.classList.add('w-20');
      }
    });
  }

  // In any other case
  else {

    // Set all buttons back to the w-33 class
    buttons.forEach(function(button) {
        button.classList.remove('w-60', 'w-20');
        button.classList.add('w-33');
    });
  }
}

你可以在这个 pen 上看到一个活生生的例子.

这样您就无需更新代码即可添加更多按钮。