问题描述:

First I'm brand new to JS but have an idea that object classes are what I should be looking into, yet I can't find a straightforward tutorial that doesn't shoot off into arrays,arguments or silly alert boxes! All I'm looking for is something like this:

<head>

<Script Language="JavaScript">

function Class (color, bodypart, item)

Var1 =newClass ('red', 'hand', 'ball')

Var2 =newClass ('green', 'foot, 'bat')

btw I have hundreds of these Vars to write, this is the reason for looking into this method

then put these Vars into some HTML:

('<div><span style="color:'+color+';>'+bodypart+'</span><br/>'+item+'</div><br/>');</script></head>

now in the body I want to call one of the Vars (e.g. Var1) and put it (with the HTML) into a div so it would automatically generate:

<div><span style="color:red;">hand</span><br/>item</div><br/>

My question:what exactly do I put in the head and body to make this happen??

I'm guessing something to do with GetElementById, Classes, etc but I can't find the right syntax to make a simple example work.

Aaaaany help would be fantastically appreciated for such a noob! (p.s. I have spent the last full 2 days reading tutorials and forum posts but they keep losing me in far more complex things than I can grasp)

网友答案:

You sound like you're in over your head at this point, and if you plan on doing a lot of javascript, you're much better off finishing off those tutorials on arrays and such.

Having said that, to help you jump ahead a little, here's what you need to do:

  • Go to http://www.jquery.com and follow the instructions on how to include jQuery onto your page
  • Write a javascript function that uses jQery to transform a javascript array into your html

That function might look something like:

var parts = [
  ['red', 'hand', 'ball'],
  ['green', 'foot', 'ball']
];

makePart = function(part){
  var div = $('<div />');
  var span = $('<span />').css({color:part[0]}).text(part[1]);
  div.append( span );
  div.append( $('<br />') );
  div.append( part[2] );
  $('body').append( div ).append( $('<br />') );
}

// this next line makes all your parts
$.each( parts, function(index, part) { makePart(part); } );

// while this would only make the first part
makePart( parts[0] );
网友答案:

There are a number of templating libraries around that will turn arrays of data into DOM structures. However, if your requirements are simple then you can put the data into an array and iterate over it to generate HTML or DOM elements:

var data = [
             ['red', 'hand', 'ball'],
             ['green', 'foot', 'bat']
           ];

function genElements(data) {
  var frag = document.createDocumentFragment();
  var div = document.createElement('div');
  var span = document.createElement('span');
  var br = document.createElement('br');
  var b, d, s, x;

  for (var i=0, iLen=data.length; i<iLen; i++) {
    x = data[i];
    d = frag.appendChild(div.cloneNode());
    s = d.appendChild(span.cloneNode());
    s.style.color = x[0];
    s.appendChild(document.createTextNode(x[1]));
    div.appendChild(br.cloneNode());
    frag.appendChild(br.cloneNode());
    alert(frag.childNodes.length);
  }
}    

Alternatively you can generate HTML and insert that:

function genElements(data) {
  var html = [];
  var x;

  for (var i=0, iLen=data.length; i<iLen; i++) {
    x = data[i];
    html.push('<div><span style="color:' + x[0] + '">' +
              x[1] + '</span><br>' + x[2] + '</div><br>');
  }
  return html.join('');
}

Then insert it wherever is appropriate. But you could do exactly the same logic on the server and just send the HTML, avoiding all the issues with client side scripting. Overall it would be much more efficient and robust.

相关阅读:
Top