Question

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

所以这是我自己完成的代码：

<div class="dash">
  <hr />
</div>

我很乐意欣赏有关如何解决这种情况的任何信息，以及有关使用类和“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时。

Answer 2

嗯，你开始认识到你遇到问题的地方，这已经很好了：）

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

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

在我意识到你宁愿使用类名而不是id＆＃39; s之后，我进行了一些编辑。结果，我现在宁愿使用document.querySelectorAll来提供更多的自由。

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

startPop('#elementId');

或者如果你想去上课

startPop('.className');

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

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

作为额外的更改，stopPop现在也使用document.querySelectorAll，因此您可以自由地将其称为startPop函数。

我在startPop函数中添加了2个可选参数，即total和callback。

总计表示您希望的最大次数＆＃34;闪烁＆＃34;元素和回调为你提供了一种在弹出结束时获得通知的方法（例如：更新开始弹出的潜在元素）

我更改了一下，允许您使用内联javascript的this语法将其悬停在元素上

＆＃13;

'use strict';

function getElements( className ) {
  // if it is a string, assume it's a selector like #id or .className
  // if not, assume it's an element
  return typeof className === "string" ? document.querySelectorAll( className ) : [className];
}

function startPop(className, total, callback) {
  // get the element once, and asign a value
  var elements = getElements( className ),
    current = 0;
  var interval = setInterval(function() {
    var opacity = ++current % 2;
    // (increase current and set style to the left over part after dividing by 2)
    elements.forEach(function(elem) { elem.style.opacity = opacity } );
    // check if the current value is larger than the total or 10 as a fallback
    if (current > (total || 10)) {
      // stops the current interval
      stopPop(interval, className);
      // notifies that the popping is finished (if you add a callback function)
      callback && callback();
    }
  }, 50);
  // return the interval so it can be saved and removed at a later time
  return interval;
}

function stopPop(interval, className) {
  // clear the interval
  clearInterval(interval);
  // set the opacity to 1 just to be sure ;)
  getElements( className ).forEach(function(elem) {
    elem.style.opacity = 1;
  });
}

function trigger(eventSource, className, maximum) {
  // get the source of the click event ( the clicked button )
  var source = eventSource.target;
  // in case the attribute is there
  if (!source.getAttribute('current-interval')) {
    // start it & save the current interval
    source.setAttribute('current-interval', startPop(className, maximum, function() {
      // completed popping ( set the text correct and remove the interval )
      source.removeAttribute('current-interval');
      source.innerText = 'Start ' + source.innerText.split(' ')[1];
    }));
    // change the text of the button
    source.innerText = 'Stop ' + source.innerText.split(' ')[1];
  } else {
    // stop it
    stopPop(source.getAttribute('current-interval'), className);
    // remove the current interval
    source.removeAttribute('current-interval');
    // reset the text of the button
    source.innerText = 'Start ' + source.innerText.split(' ')[1];
  }
}

＆＃13;

<div class="nav1">
  test navigation
</div>
<div class="nav2">
  Second nav
</div>
<div class="nav1">
  second test navigation
</div>
<div class="nav2">
  Second second nav
</div>
<a id="navigation-element-1" 
   onmouseover="this.interval = startPop( this )" 
   onmouseout="stopPop( this.interval, this )">Hover me to blink</a>

<button type="button" onclick="trigger( event, '.nav1', 100)">
  Start nav1
</button>
<button type="button" onclick="trigger( event, '.nav2', 100)">
  Start nav2
</button>

＆＃13;

Answer 3

如果您确实要将其恢复为使用ID，那么如果您一次在多个元素上运行此代码，则需要考虑popTimeout。

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]();
}

创建基于类的JS而不是id

3 个答案: