如何为具有相同类的元素切换attr(可内容编辑值

为具有相同类的元素切换attr()（可内容编辑值），可以使用JavaScript或jQuery来实现。以下是详细的解答：

基础概念

类选择器：在CSS和JavaScript中，类选择器用于选择具有相同类的多个元素。
attr()：这是一个jQuery方法，用于获取或设置元素的属性值。

类型与应用场景

类型：主要涉及HTML元素的属性，如id、class、src、href等。
应用场景：适用于需要批量修改页面元素属性的场景，如动态切换图片、链接地址等。

示例代码

以下是一个使用jQuery为具有相同类的元素切换属性值的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Attr Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="editable" data-value="Value 1">Element 1</div>
    <div class="editable" data-value="Value 2">Element 2</div>
    <div class="editable" data-value="Value 3">Element 3</div>

    <button id="toggleButton">Toggle Values</button>

    <script>
        $(document).ready(function() {
            let currentIndex = 0;
            const values = ["Value A", "Value B", "Value C"];

            $('#toggleButton').click(function() {
                $('.editable').each(function() {
                    $(this).attr('data-value', values[currentIndex]);
                });
                currentIndex = (currentIndex + 1) % values.length;
            });
        });
    </script>
</body>
</html>

解释

HTML结构：三个带有editable类的div元素，每个元素都有一个data-value属性。
jQuery脚本：
- 当页面加载完成后，绑定按钮的点击事件。
- 每次点击按钮时，遍历所有带有editable类的元素，并将其data-value属性切换为预定义的值数组中的下一个值。
- currentIndex用于跟踪当前使用的值索引，并在每次点击后更新。