Question

我有一个函数，当单击按钮时，它会更改3 divs的类名，并且需要它，以便在再次单击按钮时，类名会变回来。所有三个div的类名均为w-33，单击div按钮可将该div的名称更改为w-60，另两个div的名称更改为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

通过向每个button添加一个div类，您不再需要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上看到一个实时示例。

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

Answer 2

当您再次单击同一div时，以下代码将起作用。

注意：根据条件，当一个div已经具有w-60并单击另一个具有w-20的div时，它不会重置该类。

function changeClass(div_number) {
    var fp = document.getElementById("first-project");
    var sp = document.getElementById("second-project");
    var tp = document.getElementById("third-project");

    if (div_number == 1) {
        if (fp.classList.contains("w-60")) {
            resetClassname(fp, sp, tp);
        }

        else {
            fp.className = "w-60";
            sp.className = "w-20";
            tp.className = "w-20";
        }
    }

    if (div_number == 2) {
        if (sp.classList.contains("w-60")) {
            resetClassname(fp, sp, tp);
        }
        else {
            fp.className = "w-20";
            sp.className = "w-60";
            tp.className = "w-20";

        }
    }
    if (div_number == 3) {
        if (tp.classList.contains("w-60")) {
            resetClassname(fp, sp, tp);

        }
        else {
            fp.className = "w-20";
            sp.className = "w-20";
            tp.className = "w-60";
        }
    }
}
function resetClassname(fp, sp, tp) {
    fp.className = "w-33";
    sp.className = "w-33";
    tp.className = "w-33";
}

Answer 3

 <script>
        function changeClass(div_number) {
            if (div_number == 1) {
                if (document.getElementById("first-project").className == "w-60")
                    document.getElementById("first-project").className = "w-33";
                else
                    document.getElementById("first-project").className = "w-60";

                if (document.getElementById("second-project").className == "w-20")
                    document.getElementById("second-project").className = "w-33";
                else
                    document.getElementById("second-project").className = "w-20";

                if (document.getElementById("third-project").className == "w-20")
                    document.getElementById("third-project").className = "w-33";
                else
                    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";
            }
        }
    </script>
    <br />
    <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>

please check the code

我在单击div更改类名时添加了一些if语句

            if (document.getElementById("first-project").className == "w-60")
                document.getElementById("first-project").className = "w-33";
            else
                document.getElementById("first-project").className = "w-60";

首先，如果if语句检查类名是否已更改，则返回角色，否则，更改类名。

根据现有的班级名称更改班级名称

3 个答案: