将Javascript代码重写为jQuery

时间:2012-10-03 17:14:16

标签: javascript jquery

如何在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'));

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

3 个答案:

答案 0 :(得分:2)

这个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/

答案 1 :(得分:0)

它也会起作用

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

答案 2 :(得分:0)

解释一下

$('.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')