Home › Forums › JavaScript › Is there a better way of doing the same thing on multiple fields?
- This topic is empty.
-
AuthorPosts
-
June 26, 2013 at 12:06 am #45852
Presto
ParticipantHey 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 #140473Kitty Giraudel
ParticipantIf it’s strictly the same code, try a loop.
June 27, 2013 at 3:55 am #140671Historical Forums User
Participant1.) 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.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.