jQuery在单击按钮时获取按钮类名

Question

我试图在按钮单击时为文本框分配一个值。 我将值分配给按钮的上一个文本框。 我用var classic = window.Event.target.class;
警报（经典）； 但这给出了不确定的错误。

如何通过类名或ID或其他方式确定单击哪个按钮。

 jQuery(document).ready(function() { var formfield; var classic = window.Event.target.class; /* user clicks button on custom field, runs below code that opens new window */ jQuery(classic).click(function() { formfield = jQuery(this).prev('input'); //The input field that will hold the uploaded file url tb_show('','media-upload.php?TB_iframe=true'); return false; }); //adding my custom function with Thick box close function tb_close() . window.old_tb_remove = window.tb_remove; window.tb_remove = function() { window.old_tb_remove(); // calls the tb_remove() of the Thickbox plugin formfield=null; }; // user inserts file into post. only run custom if user started process using the above process // window.send_to_editor(html) is how wp would normally handle the received data window.original_send_to_editor = window.send_to_editor; window.send_to_editor = function(html){ if (formfield) { fileurl = jQuery('img',html).attr('src'); jQuery(formfield).val(fileurl); tb_remove(); } else { window.original_send_to_editor(html); } }; }); 

 <form method="post" action="options.php"> <?php settings_fields( 'Option-Man-settings-group' ); ?> <?php do_settings_sections( 'Option-Man-settings-group' ); ?> <div class="frame"> <table class="form-table"> <tr valign="top"> <th class="label">Logo URL:</th> <td><input type="text" name="logo-setting" size="45" value="<?php echo esc_attr( get_option('logo-setting') ); ?>" /></td> <td><input name="op" class="option-man button" type="button" value="Upload Image" /></td> </tr> <tr valign="top"> <th scope="row" class="label">Header:</th> <td><input type="text" name="main-header" size="45" value="<?php echo esc_attr( get_option('main-header') ); ?>" /></td> </tr> <tr valign="top"> <th scope="row" class="label">Carousel-url:</th> <td><input type="text" name="carousel-image" size="45" value="<?php echo esc_attr( get_option('carousel-image') ); ?>" /></td> <td><input class="option-man button" type="button" value="Upload Image" /></td> </tr> <tr valign="top"> <th scope="row" class="label">Message:</th> <td><input type="text" name="message-short" size="45" value="<?php echo esc_attr( get_option('message-short') ); ?>" /></td> </tr> <tr valign="top"> <th scope="row" class="label">Question header:</th> <td><input type="text" name="question-cur" size="45" value="<?php echo esc_attr( get_option('question-cur') ); ?>" /></td> </tr> <tr valign="top"> <th scope="row" class="label">Happy Clients Post Image:</th> <td><input type="text" name="happy-image" size="45" value="<?php echo esc_attr( get_option('happy-image') ); ?>" /></td> <td><input class="option-man button" type="button" value="Upload Image" /></td> </tr> <tr valign="top"> <th scope="row" class="label">Happy Clients Post Header:</th> <td><input type="text" name="happy-header" size="45" value="<?php echo esc_attr( get_option('happy-header') ); ?>" /></td> </tr> <tr valign="top"> <th scope="row" class="label">Happy Clients Post Text:</th> <td><input type="text" name="happy-text" size="45" value="<?php echo esc_attr( get_option('happy-text') ); ?>" /></td> </tr> </tr> <tr valign="top"> <th scope="row" class="label">Solution Builder Post Image:</th> <td><input type="text" name="builder-image" size="45" value="<?php echo esc_attr( get_option('builder-image') ); ?>" /></td> <td><input class="option-man button" type="button" value="Upload Image" /></td> </tr> <tr valign="top"> <th scope="row" class="label">Solution Builder Post Header:</th> <td><input type="text" name="builder-header" size="45" value="<?php echo esc_attr( get_option('builder-header') ); ?>" /></td> </tr> <tr valign="top"> <th scope="row" class="label">Solution Builder Post Text:</th> <td><input type="text" name="builder-text" size="45" value="<?php echo esc_attr( get_option('builder-text') ); ?>" /></td> </tr> <tr valign="top"> <th scope="row" class="label">Agile Process Post Image:</th> <td><input type="text" name="agile-image" size="45" value="<?php echo esc_attr( get_option('agile-image') ); ?>" /></td> <td><input class="option-man button" type="button" value="Upload Image" /></td> </tr> <tr valign="top"> <th scope="row" class="label">Agile Process Post Header:</th> <td><input type="text" name="agile-header" size="45" value="<?php echo esc_attr( get_option('agile-header') ); ?>" /></td> </tr> <tr valign="top"> <th scope="row" class="label">Agile Process Post Text:</th> <td><input type="text" name="agile-text" size="45" value="<?php echo esc_attr( get_option('agile-text') ); ?>" /></td> </tr> <tr valign="top"> <th scope="row" class="label">Honesty Transparency Post Image:</th> <td><input type="text" name="honesty-image" size="45" value="<?php echo esc_attr( get_option('honesty-image') ); ?>" /></td> <td><input class="option-man button" type="button" value="Upload Image" /></td> </tr> <tr valign="top"> <th scope="row" class="label">Honesty Transparency Post Header:</th> <td><input type="text" name="honesty-header" size="45" value="<?php echo esc_attr( get_option('honesty-header') ); ?>" /></td> </tr> <tr valign="top"> <th scope="row" class="label">Honesty Transparency Post Text:</th> <td><input type="text" name="honesty-text" size="45" value="<?php echo esc_attr( get_option('honesty-text') ); ?>" /></td> </tr> <tr valign="top"> <th scope="row" class="label">Medtegra Image:</th> <td><input type="text" name="Client1-image" size="45" value="<?php echo esc_attr( get_option('Client1-image') ); ?>" /></td> <td><input class="option-man button" type="button" value="Upload Image" /></td> </tr> <tr valign="top"> <th scope="row" class="label">HDFC Image:</th> <td><input type="text" name="Client2-image" size="45" value="<?php echo esc_attr( get_option('Client2-image') ); ?>" /></td> <td><input class="option-man button" type="button" value="Upload Image" /></td> </tr> <tr valign="top"> <th scope="row" class="label">iitjobs Image:</th> <td><input type="text" name="Client3-image" size="45" value="<?php echo esc_attr( get_option('Client3-image') ); ?>" /></td> <td><input class="option-man button" type="button" value="Upload Image" /></td> </tr> <tr valign="top"> <th scope="row" class="label">ProductiveTeams.com:</th> <td><input type="text" name="Client4-image" size="45" value="<?php echo esc_attr( get_option('Client4-image') ); ?>" /></td> <td><input class="option-man button" type="button" value="Upload Image" /></td> </tr> <tr valign="top"> <th scope="row" class="label">JFYS Image:</th> <td><input type="text" name="Client5-image" size="45" value="<?php echo esc_attr( get_option('Client5-image') ); ?>" /></td> <td><input class="option-man button" type="button" value="Upload Image" /></td> </tr> </tr> <tr valign="top"> <th scope="row" class="label">Clients Message:</th> <td><input type="text" name="Client-message" size="45" value="<?php echo esc_attr( get_option('Client-message') ); ?>" /></td> </tr> </tr> </tr> <tr valign="top"> <th scope="row" class="label">Google+:</th> <td><input type="text" name="google" size="45" value="<?php echo esc_attr( get_option('google') ); ?>" /></td> </tr> </tr> </tr> <tr valign="top"> <th scope="row" class="label">Twitter:</th> <td><input type="text" name="twitter" size="45" value="<?php echo esc_attr( get_option('twitter') ); ?>" /></td> </tr> </tr> </tr> <tr valign="top"> <th scope="row" class="label">Facebook:</th> <td><input type="text" name="facebook" size="45" value="<?php echo esc_attr( get_option('facebook') ); ?>" /></td> </tr> </tr> </tr> <tr valign="top"> <th scope="row" class="label">Linkedin:</th> <td><input type="text" name="linkedin" size="45" value="<?php echo esc_attr( get_option('linkedin') ); ?>" /></td> </tr> </table> </div> <?php submit_button(); ?> </form> 

Answer 1

我相信这就是您想要的。

$('.form-table').on('click', 'button, input[type="button"]', function () {

    // Get the previous input
    var input = $(this).closest('td').prev('td').find('input');

    // Get this button class
    alert($(this).attr('class'));

    // Get this button id
    alert($(this).attr('id'));


    // Your code here
    tb_show('', 'media-upload.php?TB_iframe=true');

    return false;

});

演示： https : //jsfiddle.net/tusharj/o59eoomx/2/