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

[Presto]

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);
}
});
});
});

[Kitty Giraudel]

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

[Historical Forums User]

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.

[Author]

Posts