jQuery 切换具有 3 个不同类的按钮

Question

我正在尝试创建一个可以单击两次以上的按钮..

这似乎有效，但只改变了两个类。

        .box1 {
            background-color: #000000;
            position: absolute;
            top: 100px;
            left: 100px;
            width: 100px;
            height: 100px;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        }

        .box2 {
            background-color: #000000;
            position: absolute;
            top: 100px;
            left: 100px;
            width: 100px;
            height: 100px;
            clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
        }

        .box3 {
            background-color: #000000;
            position: absolute;
            top: 100px;
            left: 100px;
            width: 100px;
            height: 100px;
            clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
        }

        .box4 {
            background-color: #000000;
            position: absolute;
            top: 100px;
            left: 100px;
            width: 100px;
            height: 100px;
            clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
        }

        #buttox {
            position: absolute;
            top: 100px;
            left: 46%;
            right: 46%;
            height: 100px;
        }

    <div class="box1"></div>
    <div id="buttox"><button id="button" class="butt1">Run Effect</button></div>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>


    $("#button").click(function () {
            $('.box1').toggleClass('box4, box2, box3');
        });

我也尝试过不加逗号。 我到处搜索但找不到切换按钮..使用 jquery 超过 2 次

Answer 1

您不能使用 .toggleClass() 以简单的方式单步遍历多个类名，而是使用 data-* 属性。

• 使用所需形状名称的数组
• 使用data-*属性来存储初始形状
• 使用当前索引变量，并在单击时增加它
• 必要时使用模（提醒）运算符

  %

  将索引重置为0
• 使用

  .attr("data-shape", idx)

  更改数据属性值。
• DRY，不要重复不必要的样式

const $shape = $("#shape");
const shapes = ["box1", "box2", "box3", "box4"];
let tot = shapes.length;
let idx = 0;

const changeShape = () => {
  idx += 1;   // Increment current index
  idx %= tot; // Loopback to 0 when matches length
  $shape.attr("data-shape", shapes[idx]); // apply to data attribute
};

$("#button").on("click", changeShape);

#shape {
  background-color: #000000;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
}

[data-shape="box1"] {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

[data-shape="box2"] {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

[data-shape="box3"] {
  clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}

[data-shape="box4"] {
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

#buttox {
  position: absolute;
  top: 100px;
  left: 46%;
  right: 46%;
  height: 100px;
}

<div id="shape" data-shape="box1"></div>
<div id="buttox">
  <button id="button" class="butt1">Run Effect</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>