将 Javascript 代码重写为 jQuery答案

【问题标题】：Re-write Javascript code into jQuery将 Javascript 代码重写为 jQuery
【发布时间】：2012-10-04 09:07:40
【问题描述】：

我如何在 jQuery 中编写下面的代码并将其应用于类名为 something 的所有元素。我试图让https://gist.github.com/1129073 应用于由类指定的多个元素，而不是仅由 id 定位的单个元素。

更具体地说，我正在查看http://jsfiddle.net/fgnass/9BkjZ/，并试图让它在类上工作而不仅仅是一个 id，因此它可以应用于许多元素。

(function(a,b,c){
  setInterval(function(){
    for(
      b=0;
      b<8;c||(a.innerHTML+='<i><b>'),
      a.childNodes[b].style.opacity=(++b-~c)%8*.1+.2);
    c=-~c
  },99)
})(document.getElementsByClassName('something'));

当使用})(document.getElementsByClassName('something')[0]); 作为最后一行时，上面的代码仅适用于类名为someting 的第一个元素。

【问题讨论】：

哇。哪里来的这么乱七八糟的乱七八糟？
@MattBall 也许像140byt.es ;-)
^ 是的，哈哈。 ;) @MattBall，见：gist.github.com/1129073。我已将getElementById 更改为getElementsByClassName，因为我希望它适用于许多classes 而不仅仅是一个id。

标签： javascript jquery

【解决方案1】：

这段 jQuery 应该和你的 javascript 做同样的事情。

$('.something').each(function() {
    for (i = 0; i < 8; i++) 
    {
        $(this).append('<b class="b' + i + ' o' + i + '" data-opacity="' + i + '"><i>•</i></b>');
    }
});

setInterval(function() {
    $('.something b').each(function () {
        $(this).removeClass('o' + $(this).attr('data-opacity'));
        $(this).attr('data-opacity', (parseInt($(this).attr('data-opacity')) + 1) % 8);
        $(this).addClass('o' + $(this).attr('data-opacity'));
    });
}, 99);

您可能还想看看以下内容，它们也可以在不使用图像的情况下创建加载微调器：
http://fgnass.github.com/spin.js/
http://cssload.net/
http://www.jquery4u.com/animation/10-css3-jquery-loading-animations-solutions/

【讨论】：

【解决方案2】：

它也可以工作

$('.something').show();

【讨论】：

应该更具体地说明代码的设计目的，请参阅上面我更新的问题。
^ 我只是对那个 jsfiddle 大笑了起来

【解决方案3】：

稍微解释一下

$('.something').fadeIn();

取自 SLaks 的回答

$('.something')

将抓取所有带有 .something 类的元素，而 fadeIn() 是一个内置的 jquery 方法，它将相关元素的不透明度从 0 更改为 1。请注意，如果您的元素的不透明度为 1而你调用fadeIn，我认为它会闪烁并淡入。除了fadeIn之外还有很多其他jquery实用程序可以在jquery网站上找到。

$('SELECTOR')

SELECTOR 可以是任何 css 选择器，例如

$('#myID .something')
$('#myID > .something')
$('#myID .something:first-child')
$('div.className #myid')

【讨论】：

感谢您的回复。我了解在 jQuery 中使用 CSS 选择器，但是如何将函数包装在类选择器目标中？请重新阅读我的问题以了解我要完成的工作。