Question

我正在尝试在点击时向我的元素添加第二个类
的之前

<div class="foo1">
    <a class="class1" >Text</a>
</div>

的后

<div class="foo1">
    <a class="class1 class2" >Text</a>
</div>

这是我的javascript代码;他们都工作：
这一个（感谢@Shomz）

var elements = document.getElementsByClassName('class1 ');

for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    element.className += ' class2';
}

或者这个（感谢@ t-j-crowder）

[].forEach.call(document.querySelectorAll(".class1 "), function(element) {
    element.className += " class2";
});

问题
该网站允许用户点击 class1 并将其更改为 class1 class2 。但是，通过运行这些代码，class1 仅暂时更改为 class1 class2 ，我的意思是点击事件未实现，它只是在视觉上改变了。重新加载站点后，它将返回到先前的状态。如何通过点击来修改永久课程？如何通过点击事件实现课程更改并永久录制？这些js代码如何记录此点击并永久更改？

Answer 1

好的，根据您的评论，您需要将更改传达给服务器，然后当页面加载时，它需要从服务器请求数据以反映任何存储的更改。根据您的编程能力，语言偏好和兼容性要求，有许多方法可以做到这一点。

最流行的方法可能是由php脚本动态编写的数据文件。加载页面时，它将根据服务器上数据文件的内容生成内容（不要与HTML页面混淆）。当用户修改和元素页面将使用javascript中的AJAX POST方法调用php脚本时，php脚本将读取现有数据文件，相应地修改它并将其保存到服务器。

对于初学者，您需要一个带PHP的Web服务器;如果您在本地测试MAMP是Mac的不错选择，我相信他们现在也可以使用Windows版本。

您将拥有3个文件（假设您的所有css和js都写在您的HTML文件中）：

的index.htm
data.js
update.php

假设一个div元素的线性列表，每个元素都有一个可切换的类和子内容。

<强>的index.htm

<html>
<head>
    <script src='datafile.js'></script>
    <script>
    window.addEventListener('load',onload,false); //register the on load handler

    function onload(){
        var body = document.getElementsByTagName('body')[0];
        var newelement;
        for(var i = 0; i < elements.length; i++){
            //for each element in the data file
            newelement = document.createElement('div');
            //create a div element
            newelement.innerHTML = elements[i].content;
            //place the content within the div
            newelement.className = elements[i].class;
            //set our classes
            body.appendChild(newelement);
            //add the div to the body
            newelement.addEventListener('click',onclick,false);
            //add a click listener to the element
        }
    }

    function onclick(){ //on click function
        var elementIndex = elements.indexOf(this); //this will be the element in the callback context
        //modify class
        postchange(elementIndex,classList);
    }

    function postchange(element,class){
        // new post method
        // data = {'element':element,'class':class};
        // post data to update.php
    }
</head>
<body>
</body>
</html>

<强> data.js

var elements = [
    {
        "content":'Hello I am div 1',
        "class":'classA'
    },
    {
        "content":'Hi, I have been known as div 2... but you can call me Tim',
        "class":'classA classB'
    }
]

我已经离开了PHP，它不是我的主要语言，所以我不会感到高兴为您即兴创作任何代码，而无需先查找并测试它。那对你来说，在Stack Overflow上找到关于POST方法的信息应该不会太难。

同样地，我将JS方法留在了JS中，因为标准的JS方法有点过于复杂。查找更简单的jQuery POST方法，再次示例应该很容易找到。

javascript在click事件上添加第二个元素到元素

1 个答案: