如何使用上由JavaScript

Question

動態生成的對象事件處理我創造了我的項目 http://jsfiddle.net/fradway/xxpBT/

的什麼，我試圖做一個簡短的描述的小提琴： 我有一組由JavaScript生成的圖像。當用戶點擊圖像時，我想讓警告窗口彈出，讓他/她知道圖像被點擊。

在我的對象構造函數中，我有一個函數試圖處理this.show_piece。該功能不起作用，我想知道我做錯了什麼。

function Piece(name,title,type,photo,description){ 
    this.name=name; 
    this.title=title; 
    this.type=type; 
    this.photo=photo; 
    this.description=description; 


    this.spawn_piece=function(){ 
     var the_piece=document.createElement('div'); 
     the_piece.className='showcase_window'; 
     the_piece.id=this.name; 
     document.getElementById('showcase_container').appendChild(the_piece); 
     document.getElementById(the_piece.id).innerHTML="<img class='showcase_container' src=images/"+type+'/'+photo+" alt="+name+"/>" 
    } 

    this.show_piece=function(){ 
     document.getElementById(this.name).onclick=function(){ 
      alert('click'); 
     } 
    } 

} 
var port_show=new Array(); 
port_show[0]=new Piece('the_party_people','The Party People','ui','the_party_people.jpg','An HTML mockup design for a fictional party planning agency.'); 
port_show[1]=new Piece('finger_spell_it','Finger Spell It','ui','finger_spell_it.jpg','An American Sign Language Finger Spelling App that I created.'); 
port_show[2]=new Piece('man_muscle','Man Muscle Fitness','ui','man_muscle.jpg','A design for a mens fitness center.'); 
port_show[3]=new Piece('house_of_yin','House of Yin','ui','house_of_yin.jpg','A design for a fictional Japanese cuisine restaraunt.'); 
port_show[4]=new Piece('bills_burgers','Bills Burgers','ui','bills_burgers.jpg','A design for a fast food burger joint.'); 
port_show[5]=new Piece('masters_martial_arts','Masters Martial Arts','ui','masters_martial_arts.jpg','A web page design for a Martial Arts center.'); 
port_show[6]=new Piece('flip_fire_player','Flip Fire Media Player Prototype','ui','f_f_player.jpg','A prototype that I created for a client. He needed a way to show how the direction that he wanted to go with his project The Flip Fire Media Player'); 
port_show[7]=new Piece('talented','Truly Tal3lented Wordpress Theme','ui','talent_1.jpg','A word press blog theme created for the independent Hip-Hop artist Tal3nted.'); 
port_show[8]=new Piece('4_me_up','4 Me Up Logo','gd','4meup.png','A logo created for the automated marketing company 4meUp.'); 
port_show[9]=new Piece('protest_banner','Protest Web Banner','gd','banner-01-01.png','A protest banner created for a swedish petition site.'); 
port_show[10]=new Piece('disco_flier','Disco Flier','gd','disco_flyer.png','A party flier created for a charity dance.'); 
port_show[11]=new Piece('painti','Children\'s clothing company Painti Logo','gd','paiti_logo.png','A logo created for a start-up childrens clothing company.'); 
port_show[12]=new Piece('sea_pledge','Sea Pledge','gd','T-Shirt_design1.png','A tee-shirt design for an animal rights organization, the shirts were designed to bring light to the cruelty that sea creatures face at places such as Sea World.'); 

function populate_portfolio(type){ 
    for(var x in port_show){ 
     if(port_show[x].type===type){ 
      port_show[x].spawn_piece(); 
     } 
    } 
} 

function press_portfolio_btn(btn){ 
    var showcase=document.getElementById('showcase_container'); 
    while(document.getElementById('showcase_container').hasChildNodes()){ 
     showcase.removeChild(showcase.lastChild); 
    } 
    if(btn==="ui"){ 
     populate_portfolio("ui"); 
    }else if(btn==="gd"){ 
     populate_portfolio("gd"); 
    }else{} 
} 



function validate_name(field){ 
    if (field.form[field.name].value.split(" ").join("").length==0){ 
     document.getElementById('name_help').innerHTML='Please enter your name into the field.'; 
     return false; 
    } 
    else{ 
     document.getElementById('name_help').innerHTML=''; 
     return true; 
    } 
} 
function validate_comment(field){ 
    if (field.form[field.name].value.split(" ").join("").length==0){ 
     document.getElementById('message_help').innerHTML='Please enter an inquiry into the field.'; 
     return false; 
    } 
    else{ 
     document.getElementById('message_help').innerHTML=''; 
     return true; 
    } 
} 

function validate_email(field){ 

    const EMAIL_REGEX=/^[\w_\.]+@[\w_\.]+\.(\w{2,4})$/; 
    if(EMAIL_REGEX.test(field.form[field.name].value)){ 
     document.getElementById('email_help').innerHTML=''; 
     return true; 
    }else{ 
     document.getElementById('email_help').innerHTML='Please enter a valid email address.'; 
     return false; 
    } 
} 

function send(form,form_id){ 
    if(validate_name(form["name"]) && validate_comment(form["message"]) && validate_email(form["email"])){ 
     document.getElementById(form_id).submit(); 
    }else{ 
     alert('Please make sure that all the required fields are valid before submitting'); 
    } 
} 

Answer 1

這裏是Working Fiddle

this.spawn_piece=function(){ 
     var the_piece=document.createElement('div'); 
     the_piece.className='showcase_window'; 
     the_piece.id=this.name; 
     document.getElementById('showcase_container').appendChild(the_piece); 
     document.getElementById(the_piece.id).innerHTML="<img class='showcase_container' src=images/"+type+'/'+photo+" alt="+name+"/>" 
     this.show_piece(); // <-------add this line to your code 
    } 

Answer 2

您不要在任何地方調用「show_piece」，只需在「spawn_piece」的末尾添加「this.show_piece（）」即可。

順便說一句，這種東西更容易用jquery進行編碼。