Grow your CSS skills. Land your dream job.

Is there a better way of doing the same thing on multiple fields?

  • # June 26, 2013 at 12:06 am

    Hey guys,

    Is there a better way to be doing this? Below is a snippet of code that I have fumbled to write so far, it works, but I would guess there has to be a better way to do it. I have a total of 12 image upload fields.

    jQuery(document).ready(function (){
    jQuery(“#photo0″).on(“change”, function(){
    jQuery(“#photoName0″).val(jQuery(this).val().replace(/C:\fakepath\/i, ”));
    });
    jQuery(“#photo0″).hover(function() {
    jQuery(“#photoBrowse0″).toggleClass(“btn-inverse”);
    });
    jQuery(“#thumbnail”).click(function() {
    jQuery(“#photoBrowse0″).toggleClass(“btn-inverse”);
    jQuery.get(“index.php?option=com_cswdownloads&task=removeimg&dir=32de910e0791bdd0&img=chris_80x80.jpg”,function(data,status){
    if(status == “success”){
    jQuery(“#photoName0″).val(null);
    jQuery(“#photo0″).val(null);
    }
    });
    });
    jQuery(“#photo1″).on(“change”, function(){
    jQuery(“#photoName1″).val(jQuery(this).val().replace(/C:\fakepath\/i, ”));
    });
    jQuery(“#photo1″).hover(function() {
    jQuery(“#photoBrowse1″).toggleClass(“btn-inverse”);
    });
    jQuery(“#deletePhoto1″).click(function() {
    jQuery(“#photoBrowse1″).toggleClass(“btn-inverse”);
    jQuery.get(“index.php?option=com_cswdownloads&task=removeimg&dir=32de910e0791bdd0&img=chris_85x85.jpg”,function(data,status){
    if(status == “success”){
    jQuery(“#photoName1″).val(null);
    jQuery(“#photo1″).val(null);
    }
    });
    });
    jQuery(“#photo2″).on(“change”, function(){
    jQuery(“#photoName2″).val(jQuery(this).val().replace(/C:\fakepath\/i, ”));
    });
    jQuery(“#photo2″).hover(function() {
    jQuery(“#photoBrowse2″).toggleClass(“btn-inverse”);
    });
    jQuery(“#deletePhoto2″).click(function() {
    jQuery(“#photoBrowse2″).toggleClass(“btn-inverse”);
    jQuery.get(“index.php?option=com_cswdownloads&task=removeimg&dir=32de910e0791bdd0&img=chris_100x100.jpg”,function(data,status){
    if(status == “success”){
    jQuery(“#photoName2″).val(null);
    jQuery(“#photo2″).val(null);
    }
    });
    });
    });

    # June 26, 2013 at 3:23 am

    If it’s strictly the same code, try a loop.

    # June 26, 2013 at 4:22 am

    Or give all those `#someId0..2` a common class to use as JS selector, that helps with most of the repetition. Need to figure out a way to get all the `.get` urls for different images though, maybe a data attribute.

    You must like to type jQuery all the time, too :P

    # June 27, 2013 at 3:55 am

    1.) if you are using jQuery for no conflict mode try

    jQuery(document).ready(function($) {
    // You can use $ now.
    // Even for wordpress, or working with other libs.
    });

    2.) Check out this (http://codepen.io/doublea79/pen/yjkiB“Code Pen Link”) I have put together a couple of examples.

    3.) I did not tackle the .get url I think using the data-attr like Dillon recommended is probably your best bet. If that’s not an option I would create an object that holds the ID and the url to .get, but adding the data attribute would be way easier.

    4.) I have not check any of the code so it might be riddle with errors, but should get you started in the right direction.

    5.) if you are up for the challenge you might want to try writing this in using object literal routing for your .get urls.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".