Question

我正在尝试创建一个只有跨度元素的网格，您可以在跨度上单击它，它看起来像屏幕上的方块，它们将随机更改颜色。颜色已在CSS上设置，因此类元素将相应更改。我知道这是可以用jQuery轻松完成的，我已经完成了但是我试图弄清楚如何使用JavaScript来实现它。我已经能够改变一个span元素而不是其余的，当我点击它时它也不会再次改变颜色。所以我有点被困在这里。这是实际项目：http://codepen.io/Albertin89/pen/QvWBOm。

这是我使用的JavaScript代码：

var colours=['red', 'orange', 'yellow','blue', 'green', 'indigo', 'violet'];


//Creating a function to return a random colour from the array


  var i= Math.floor(Math.random()*colours.length); //Generating a random number between 0 and the last index in our array
 var randomColour = colours[i];// Using our random number to pull a random item from the array using its index
  //console.log(randomColour);//returning our array item



//Creating Event Listeners


var spans = document.getElementsByTagName('span');
this.addEventListener('click', getRandomColourReturned);


  function getRandomColourReturned(){
    spans[0].className = randomColour; 

     if(spans[0].className=== randomColour){
      spans[0].className=== randomColour;
       //spans[0].classList.add(randomColour);


   }


 }//getRandomColourReturned function

Answer 1

就像这样。

data = '''first and last name   
        NAME SURNAME            
        zip country n. phone number mobile
        United Kingdom      +1111111111
        e-mail
        email@email.email
        guest first and last name 1
        NAME SURNAME
        guest first and last name 2
        NAME SURNAME
        name    address city    province
        NAME SURNAME    London  London  
        zip
        AAAAA
        Cancellation of the reservation.
        '''
# split on space, convert to list
ldata = data.split()
# strip leading and trailing white space from each item
ldata = [i.strip() for i in ldata]
# split on line break, convert to list
ndata = data.split('\n')
ndata = [i.strip() for i in ndata]
#convert list to string   
sdata = ' '.join(ldata)

print ldata
print ndata
print sdata

# two examples of split after, split before
name_surname = sdata.split('first and last name')[1].split('zip')[0]
print name_surname

country_phone = sdata.split('mobile')[1].split('e-mail')[0]
print country_phone

>>>

['first', 'and', 'last', 'name', 'NAME', 'SURNAME', 'zip', 'country', 'n.', 'phone', 'number', 'mobile', 'United', 'Kingdom', '+1111111111', 'e-mail', 'email@email.email', 'guest', 'first', 'and', 'last', 'name', '1', 'NAME', 'SURNAME', 'guest', 'first', 'and', 'last', 'name', '2', 'NAME', 'SURNAME', 'name', 'address', 'city', 'province', 'NAME', 'SURNAME', 'London', 'London', 'zip', 'AAAAA', 'Cancellation', 'of', 'the', 'reservation.']
['first and last name', 'NAME SURNAME', 'zip country n. phone number mobile', 'United Kingdom      +1111111111', 'e-mail', 'email@email.email', 'guest first and last name 1', 'NAME SURNAME', 'guest first and last name 2', 'NAME SURNAME', 'name    address city    province', 'NAME SURNAME    London  London', 'zip', 'AAAAA', 'Cancellation of the reservation.', '']
first and last name NAME SURNAME zip country n. phone number mobile United Kingdom +1111111111 e-mail email@email.email guest first and last name 1 NAME SURNAME guest first and last name 2 NAME SURNAME name address city province NAME SURNAME London London zip AAAAA Cancellation of the reservation.
 NAME SURNAME 
 United Kingdom +1111111111

Answer 2

您需要为每个元素绑定click事件，并确保使用Function按需选择颜色。

var colours = ['red', 'orange', 'yellow','blue', 'green', 'indigo', 'violet'],
    spanElements = document.getElementsByTagName('span');

for (var i = 0, iLen = spanElements.length; i < iLen; i++) {
  spanElements[i].addEventListener('click', getRandomColourReturned, false);
}

function getRandomColourReturned (e) {
  e.currentTarget.className = randomColour();
}

function randomColour () {
    return colours[Math.floor(Math.random()*colours.length)];
}

http://codepen.io/rooyva/pen/rmayvO

使用JavaScript的元素上的随机颜色

2 个答案: