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

你不要在任何地方调用“show_piece”，只需在“spawn_piece”的末尾添加“this.show_piece（）”。

顺便说一下，用jquery编写这类东西要容易得多。

Answer 2

以下是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
    }

如何在javascript动态生成的对象上使用eventhandler

2 个答案: