javascript - 创建一个基于类的 JS 而不是 id

Question

所以我创建了这个 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;
}

如果有任何关于如何解决这种情况的信息，以及有关使用类和“this”的任何教程，我将不胜感激。

Answer 1

像这样；与其将值硬编码到函数中，不如将值传递进来，这样您就可以在不止一件事上重用该函数。在这种情况下，您现在可以使用 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);
}

如果您想知道 1 - opaNumber;这是在 1 和 0 之间切换值的一种更简单的方法。因为 1-1=0 和 1-0=1。