JavaScript中的document.getElementsByClassName

时间：2015-06-17 19:45:31

标签： javascript jquery html

我使用Bootstrap 3发出两条警告消息。每个警报都是 div ，类警告。

我想在每个警报中添加淡入淡出和类，以便在关闭时淡出。

为什么下面的JS脚本不起作用？谢谢。

var alerts = document.getElementsByClassName("alert");
for (var i = 0; i < alerts.length; i++) {
  alerts[i].className += "fade in";
}

我尝试使用jQuery，但确实有效。

$(document).ready(function() {
  $('.alert').addClass('fade in');
});

错误代码： 

<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

  <script type="text/javascript">
    var alerts = document.getElementsByClassName("alert");
    for (var i = 0; i < alerts.length; i++) {
      alerts[i].className += "fade in";
    }
  </script>
</head>

<body>
  <div class="alert alert-success">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    Message</div>
  <div class="alert alert-success">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    Message</div>
</body>

</html>

2 个答案:

答案 0 :(得分：3)

因为它已经有一个类#------Importing modules---------# import pygame import sys import time import pygame.mixer from pygame.locals import* import random from gameover import* from main1_pi import * from main2 import * #------Screen size & other parameters--------------# pygame.init() SCREEN_HEIGHT=768 SCREEN_WIDTH=1366 size=(SCREEN_WIDTH,SCREEN_HEIGHT) ic=pygame.image.load('extras/ino.png') pygame.display.set_icon(ic) screen=pygame.display.set_mode((size),pygame.FULLSCREEN) pygame.display.set_caption('PI-PY-PO') #--------function to obtain text----------------# def text_display(text,color,size,font): FONT=pygame.font.SysFont(font,size) FONT.set_bold(True) SURFACEFONT=FONT.render(text,True,color) return SURFACEFONT #metro2(screen) #start screen clr1=(22,122,211) #colors clr2=(255,44,166) clr3=(34,55,145) red=(255,0,0) white=(255,255,255) p1,p2=0,0 text1=text_display('Player 2',white,30,'Arial') #texts text2=text_display('Player 1',white,30,'Arial') text3=text_display('%s-%s'%(p1,p2),white,50,'Arial') text1_a=text1.get_rect() text2_b=text2.get_rect() text3_b=text3.get_rect() text1_a.center=(SCREEN_WIDTH-170,40) text2_b.center=(180,40) text3_b.center=(SCREEN_WIDTH/2,40) clock=pygame.time.Clock() # FPS=60 total_frames=0 width=260 height=195 xleft=300 ytop=100 turn=0 stat_of_turn=random.randint(1,2) noft=0 list1=['0','0','0','0','0','0','0','0','0'] background1=pygame.image.load('back.jpg') t=pygame.image.load('cross.gif') p=pygame.image.load('circle.gif') you=pygame.image.load('friend.gif') friend=pygame.image.load('you.gif') while True: a=pygame.draw.rect(screen,white,(xleft,ytop,width,height)) b=pygame.draw.rect(screen,white,(xleft+width,ytop,width,height)) c=pygame.draw.rect(screen,white,(xleft+width*2,ytop,width,height)) d=pygame.draw.rect(screen,white,(xleft,ytop+height,width,height)) e=pygame.draw.rect(screen,white,(xleft+width,ytop+height,width,height)) f=pygame.draw.rect(screen,white,(xleft+width*2,ytop+height,width,height)) g=pygame.draw.rect(screen,white,(xleft,ytop+height*2,width,height)) h=pygame.draw.rect(screen,white,(xleft+width,ytop+height*2,width,height)) i=pygame.draw.rect(screen,white,(xleft+width*2,ytop+height*2,width,height)) screen.blit(background1,(0,0)) if stat_of_turn==1: screen.blit(you,(SCREEN_WIDTH-88,0)) screen.blit(text1,text1_a) if stat_of_turn==2: screen.blit(friend,(0,0)) screen.blit(text2,text2_b) screen.blit(text3,text3_b) pygame.draw.line(screen, white, (xleft,ytop+height), (xleft+width*3,ytop+height),5) pygame.draw.line(screen, white, (xleft,ytop+height*2), (xleft+width*3,ytop+height*2),5) pygame.draw.line(screen, white, (xleft+width,ytop), (xleft+width,ytop+height*3),5) pygame.draw.line(screen, white, (xleft+width*2,ytop), (xleft+width*2,ytop+height*3),5) pos = pygame.mouse.get_pos() pygame.mouse.set_visible(True) if(list1[0]==list1[1]==list1[2]) and list1[0]!='0': if stat_of_turn==1: p1=p1+1 elif stat_of_turn==2: p2=p2+1 x=pygame.draw.line(screen, white, (xleft,100+height/2), (xleft+width*3,100+height/2),5) pygame.display.update(x) time.sleep(5) list1=['0','0','0','0','0','0','0','0','0'] stat_of_turn=random.randint(1,2) noft=0 elif(list1[0]==list1[3]==list1[6]) and list1[0]!='0': if stat_of_turn==1: p1=p1+1 elif stat_of_turn==2: p2=p2+1 x=pygame.draw.line(screen, white, (xleft+width/2,100), (xleft+width/2,100+3*height),5) pygame.display.update(x) time.sleep(5) list1=['0','0','0','0','0','0','0','0','0'] stat_of_turn=random.randint(1,2) noft=0 elif(list1[0]==list1[4]==list1[8]) and list1[0]!='0': if stat_of_turn==1: p1=p1+1 elif stat_of_turn==2: p2=p2+1 x=pygame.draw.line(screen, white, (xleft,100), (xleft+width*3,100+3*height),5) pygame.display.update(x) time.sleep(5) list1=['0','0','0','0','0','0','0','0','0'] stat_of_turn=random.randint(1,2) noft=0 elif(list1[6]==list1[7]==list1[8]) and list1[8]!='0': if stat_of_turn==1: p1=p1+1 elif stat_of_turn==2: p2=p2+1 x=pygame.draw.line(screen, white, (xleft,100+3*height-height/2), (xleft+width*3,100+3*height-height/2),5) pygame.display.update(x) time.sleep(5) list1=['0','0','0','0','0','0','0','0','0'] stat_of_turn=random.randint(1,2) noft=0 continue; elif(list1[2]==list1[5]==list1[8]) and list1[8]!='0': if stat_of_turn==1: p1=p1+1 elif stat_of_turn==2: p2=p2+1 x=pygame.draw.line(screen, white, (xleft+width*3-width/2,100), (xleft+width*3-width/2,100+3*height),5) pygame.display.update(x) time.sleep(5) list1=['0','0','0','0','0','0','0','0','0'] stat_of_turn=random.randint(1,2) noft=0 continue; elif(list1[6]==list1[4]==list1[2]) and list1[6]!='0': if stat_of_turn==1: p1=p1+1 elif stat_of_turn==2: p2=p2+1 x=pygame.draw.line(screen, white, (xleft+width*3,100), (xleft,100+3*height),1) pygame.display.update(x) time.sleep(5) list1=['0','0','0','0','0','0','0','0','0'] stat_of_turn=random.randint(1,2) noft=0 continue; elif(list1[3]==list1[4]==list1[5]) and list1[3]!='0': if stat_of_turn==1: p1=p1+1 elif stat_of_turn==2: p2=p2+1 x=pygame.draw.line(screen, white, (xleft,100+height+height/2), (xleft+width*3,100+height+height/2),5) pygame.display.update(x) time.sleep(5) list1=['0','0','0','0','0','0','0','0','0'] stat_of_turn=random.randint(1,2) noft=0 continue; elif(list1[1]==list1[4]==list1[7]) and list1[1]!='0': if stat_of_turn==1: p1=p1+1 elif stat_of_turn==2: p2=p2+1 x=pygame.draw.line(screen, white, (xleft+width*2-width/2,100), (xleft+width*2-width/2,100+3*height),5) pygame.display.update(x) time.sleep(5) list1=['0','0','0','0','0','0','0','0','0'] stat_of_turn=random.randint(1,2) noft=0 continue; if noft==9: list1=['0','0','0','0','0','0','0','0','0'] stat_of_turn=random.randint(1,2) noft=0 continue; text3=text_display('%s - %s'%(p1,p2),white,50,'Arial') for event in pygame.event.get(): if event.type==pygame.QUIT: pygame.quit() sys.exit() if event.type==pygame.KEYDOWN: if event.key==pygame.K_ESCAPE: metroxx(screen) if event.type == pygame.MOUSEBUTTONDOWN and event.button == 1: if a.collidepoint(pos) and list1[0]=='0': if stat_of_turn==2: stat_of_turn=1 list1[0]='2' elif stat_of_turn==1: stat_of_turn=2 list1[0]='1' noft=noft+1 if b.collidepoint(pos)and list1[1]=='0': if stat_of_turn==2: stat_of_turn=1 list1[1]='2' elif stat_of_turn==1: stat_of_turn=2 list1[1]='1' noft=noft+1 if c.collidepoint(pos)and list1[2]=='0': if stat_of_turn==2: stat_of_turn=1 list1[2]='2' elif stat_of_turn==1: stat_of_turn=2 list1[2]='1' noft=noft+1 if d.collidepoint(pos)and list1[3]=='0': if stat_of_turn==2: stat_of_turn=1 list1[3]='2' elif stat_of_turn==1: stat_of_turn=2 list1[3]='1' noft=noft+1 if e.collidepoint(pos)and list1[4]=='0': if stat_of_turn==2: stat_of_turn=1 list1[4]='2' elif stat_of_turn==1: stat_of_turn=2 list1[4]='1' noft=noft+1 if f.collidepoint(pos)and list1[5]=='0': if stat_of_turn==2: stat_of_turn=1 list1[5]='2' elif stat_of_turn==1: stat_of_turn=2 list1[5]='1' noft=noft+1 if g.collidepoint(pos)and list1[6]=='0': if stat_of_turn==2: stat_of_turn=1 list1[6]='2' elif stat_of_turn==1: stat_of_turn=2 list1[6]='1' noft=noft+1 if h.collidepoint(pos)and list1[7]=='0': if stat_of_turn==2: stat_of_turn=1 list1[7]='2' elif stat_of_turn==1: stat_of_turn=2 list1[7]='1' noft=noft+1 if i.collidepoint(pos)and list1[8]=='0': if stat_of_turn==2: stat_of_turn=1 list1[8]='2' elif stat_of_turn==1: stat_of_turn=2 list1[8]='1' noft=noft+1 if list1[0]=='1': screen.blit(t,a) elif list1[0]=='2': screen.blit(p,a) if list1[1]=='1': screen.blit(t,b) elif list1[1]=='2': screen.blit(p,b) if list1[2]=='1': screen.blit(t,c) elif list1[2]=='2': screen.blit(p,c) if list1[3]=='1': screen.blit(t,d) elif list1[3]=='2': screen.blit(p,d) if list1[4]=='1': screen.blit(t,e) elif list1[4]=='2': screen.blit(p,e) if list1[5]=='1': screen.blit(t,f) elif list1[5]=='2': screen.blit(p,f) if list1[6]=='1': screen.blit(t,g) elif list1[6]=='2': screen.blit(p,g) if list1[7]=='1': screen.blit(t,h) elif list1[7]=='2': screen.blit(p,h) if list1[8]=='1': screen.blit(t,i) elif list1[8]=='2': screen.blit(p,i) z=0 pygame.display.flip() clock.tick(FPS) ，然后通过连接到字符串来添加更多

alert

请注意，你没有在那里获得空间，你可以做到

"alert" + "fade in" === "alertfade in";

这不是一个非常好的解决方案，或者在现代浏览器中你可以做到

alerts[i].className += " fade in";

或者写下你的功能有点相同，MDN上有一个polyfill可以为你做这个。

另请注意，您在DOM中可用之前尝试访问这些元素，您需要移动脚本标记或使用DOM就绪处理程序，但最重要的是，当某些内容不需要时，您需要打开控制台不行。

答案 1 :(得分：1)

您需要将脚本放在元素之后。添加新课程alerts[i].className += " fade in";

时，您还需要一个空格 

<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

  
</head>

<body>
  <div class="alert alert-success">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    Message</div>
  <div class="alert alert-success">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    Message</div>

<script type="text/javascript">
    var alerts = document.getElementsByClassName("alert");
    for (var i = 0; i < alerts.length; i++) {
      alerts[i].className += " fade in";
    }
  </script>
</body>

</html>

相关问题
最新问题