Javascript 创建基于类的JS而不是id

所以我创建了这个javascript，它使用它的ID为某个地方设置动画。 问题是站点上有很多这样的函数，这意味着我必须多次复制这个函数，以替换getElementById（“x”）中的x

下面是我自己完全完成的代码：

    var popcount = 0;
var opanumber = 1;
var poptimeout;
function pop() {
    if (popcount < 10) {
        popcount++;
        if (opanumber == 1) {
        document.getElementById("nav1").style.opacity = 0;
        opanumber = 0;
        poptimeout = setTimeout("pop()", 50);
        }
        else {
        document.getElementById("nav1").style.opacity = 1;
        opanumber = 1;
        poptimeout = setTimeout("pop()", 50);
        }
    }
    else {
    popcount = 0;
    document.getElementById("nav1").style.opacity = 1;
    }
}

function stoppop() {
    clearTimeout(poptimeout);
    popcount = 0;
    document.getElementById("nav1").style.opacity = 1;
}

var-popcount=0；
var opanumber=1；
var-poptimeout；
函数pop（）{
如果（popcount<10）{
popcount++；
如果（opanumber==1）{
document.getElementById（“nav1”）.style.opacity=0；
opanumber=0；
poptimeout=setTimeout（“pop（）”，50）；
}
否则{
document.getElementById（“nav1”）.style.opacity=1；
opanumber=1；
poptimeout=setTimeout（“pop（）”，50）；
}
}
否则{
popcount=0；
document.getElementById（“nav1”）.style.opacity=1；
}
}
函数stoppop（）{
clearTimeout（poptimeout）；
popcount=0；
document.getElementById（“nav1”）.style.opacity=1；
}

---

如果您能提供有关如何解决这种情况的信息，以及有关使用类和“this”的教程，我将不胜感激；与其将一个值硬编码到一个函数中，不如传入该值，以便可以在多个方面重用该函数。在本例中，您现在可以使用CSS类的名称调用startPop和stopPop

var popTimeout;

function setOpacity(className, value) {
    Array.prototype.forEach.call(
        document.getElementsByClassName(className), 
        function(el) {
            el.style.opacity = value;
        }
    );
}

function pop(className, popCount, opaNumber) {
    if (popCount < 10) { //Must be even number so you end on opacity = 1
        setOpacity(className, opaNumber);
        popTimeout = setTimeout(function() {
            pop(className, popCount++, 1-opaNumber);
        }, 50);
    }
}

function startPop(className) {
    pop(className, 0, 0);
}

function stopPop(className) {
    clearTimeout(popTimeout);
    setOpacity(className, 1);
}

var超时；
函数setOpacity（类名、值）{
Array.prototype.forEach.call(
document.getElementsByClassName（类名称），
功能（el）{
el.style.opacity=值；
}
);
}
函数pop（类名、popCount、opaNumber）{
if（popCount<10）{//必须是偶数，所以以不透明度=1结束
setOpacity（类名、opaNumber）；
popTimeout=setTimeout（函数（）{
pop（类名，popCount++，1-opaNumber）；
}, 50);
}
}
函数startPop（类名）{
pop（className，0，0）；
}
函数stopPop（类名）{
clearTimeout（popTimeout）；
setOpacity（类名，1）；
}

---

如果您想知道

1-数字这是一种在1和0之间切换值的简单方法。当1-1=0和1-0=1时。
首先，你要认识到问题出在哪里，这已经是一件好事：）

为了使代码更加紧凑，并尽可能多地从本地范围中获取内容，您可以检查以下实现

从某种意义上说，这是一个小的演示，我尝试添加尽可能多的评论

在意识到您更想使用类名而不是id:）之后，我编辑了更多内容。因此，我现在更愿意使用，这给了您更多的自由

现在，您可以使用任何有效的选择器调用startPop函数。如果您想纯粹根据ID弹出，可以使用：

startPop('#elementId');

或者如果你想去上课

startPop('.className');

该示例本身还添加了另一个函数nl trigger，它显示了如何启动/停止函数

我还选择使用
setInterval
方法，而不是
setTimeout
方法。两个函数都会在一定的毫秒数后回调函数，但是setInterval只需调用一次

作为额外的更改，stopPop现在还使用了
document.querySelectorAll
，因此您可以自由调用它，就像调用
startPop
函数一样

我在startPop函数中添加了另外两个可选参数，即
total
和
callback

Total表示您希望“闪烁”元素的最大次数，回调为您提供了在弹出结束时获得通知的方法（例如：更新启动弹出的潜在元素）

我对它做了更多的修改，允许您通过使用内联javascript的
this
语法将它悬停在元素上


“严格使用”；
函数getElements（类名）{
//如果它是一个字符串，则假设它是一个类似于#id或.className的选择器
//如果不是，则假定它是一个元素
返回className的类型==“string”？document.querySelectorAll（className）：[className]；
}
函数startPop（类名、总数、回调）{
//获取元素一次，并指定一个值
var elements=getElements（className），
电流=0；
var interval=setInterval（函数（）{
变量不透明度=+当前%2；
//（增加当前值并在除以2后将样式设置为剩余部分）
elements.forEach（函数（elem）{elem.style.opacity=opacity}）；
//检查当前值是否大于总值或10作为回退
如果（当前>（总计| | 10））{
//停止当前间隔
stopPop（间隔，类名）；
//通知弹出已完成（如果添加回调函数）
callback&&callback（）；
}
}, 50);
//返回时间间隔，以便以后保存和删除
返回间隔；
}
函数stopPop（间隔，类名）{
//清除间隔
间隔时间；
//将不透明度设置为1以确保；）
getElements（className）.forEach（函数（elem）{
elem.style.opacity=1；
});
}
函数触发器（eventSource、类名、最大值）{
//获取单击事件的源（单击的按钮）
var source=eventSource.target；
//以防属性存在
如果（！source.getAttribute（'current-interval'））{
//启动并保存当前间隔
source.setAttribute（'current-interval'，startPop（类名，最大值，函数（））{
//已完成弹出（设置正确的文本并删除间隔）
source.removeAttribute（“当前间隔”）；
source.innerText='Start'+source.innerText.split（''）[1]；
}));
//更改按钮的文本
source.innerText='Stop'+source.innerText.split（''）[1]；
}否则{
//住手
stopPop（source.getAttribute（'current-interval'），className）；
//删除当前间隔
source.removeAttri
function setOpacity(id, value) {
    document.getElementById(id).style.opacity = value;
}

function runPop(id) {
    function pop(id, popCount, opaNumber) {
        if (popCount < 10) { //Must be even number so you end on opacity = 1
            setOpacity(id, opaNumber);
            popTimeout = setTimeout(function() {
                pop(id, popCount++, 1-opaNumber);
            }, 50);
        }
    }

    var popTimeout;

    pop(id, 0, 0);

    return function() {
        clearTimeout(popTimeout);
        setOpacity(id, 1);
    }
}

var killPop = [];

function startPop(id) {
    killPop[id] = runPop(id);
}

function stopPop(id) {
    killPop[id]();
}