-1
\$\begingroup\$

Ok, I have written the following but I am sure it can be done better, my two main worries here are the awful use of the if else statements in the check variables and the usage of setinterval to set the i variable. my problem with the i variable is that the check's run after the i has been set forcing the i to always have a value of 0 due to the css being set as display none. Hope someone can advise:

    (function ($) {
    // variables
    setInterval(function() {
      // Do something every 5 seconds
      i = jQuery('#widgets-right').find('.addinput > div:visible').length + 2;
}, 1500);

        //check if box has value allready and show if it has
  var      check1 = function () {
            var empty1 = $("#widgets-right .div_2  p .title2:input").filter(function () {
                return this.value === "";
            });
            if (empty1.length) {
                $('.div_2').hide();
            } else {
                $('.div_2').show();
            }
        },
        check2 = function () {
            var empty2 = $("#widgets-right .div_3  p .title3:input").filter(function () {
                return this.value === "";
            });
            if (empty2.length) {
                $('.div_3').hide();
            } else {
                $('.div_3').show();
            }
        },
        check3 = function () {
            var empty3 = $("#widgets-right .div_4  p .title4:input").filter(function () {
                return this.value === "";
            });
            if (empty3.length) {
                $('.div_4').hide();
            } else {
                $('.div_4').show();
            }
        },
        check4 = function () {
            var empty4 = $("#widgets-right .div_5  p .title5:input").filter(function () {
                return this.value === "";
            });
            if (empty4.length) {
                $('.div_5').hide();
            } else {
                $('.div_5').show();
            }
        },
        check5 = function () {
            var empty5 = $("#widgets-right .div_6  p .title6:input").filter(function () {
                return this.value === "";
            });
            if (empty5.length) {
                $('.div_6').hide();
            } else {
                $('.div_6').show();
            }
        },
        check6 = function () {
            var empty6 = $("#widgets-right .div_7  p .title7:input").filter(function () {
                return this.value === "";
            });
            if (empty6.length) {
                $('.div_7').hide();
            } else {
                $('.div_7').show();
            }
        },
        check7 = function () {
            var empty7 = $("#widgets-right .div_8  p .title8:input").filter(function () {
                return this.value === "";
            });
            if (empty7.length) {
                $('.div_8').hide();
            } else {
                $('.div_8').show();
            }
        },
        check8 = function () {
            var empty8 = $("#widgets-right .div_9  p .title9:input").filter(function () {
                return this.value === "";
            });
            if (empty8.length) {
                $('.div_9').hide();
            } else {
                $('.div_9').show();
            }
        },
        check9 = function () {
            var empty9 = $("#widgets-right .div_10  p .title10:input").filter(function () {
                return this.value === "";
            });
            if (empty9.length) {
                $('.div_10').hide();
            } else {
                $('.div_10').show();
            }
        };
    check1();
    check2();
    check3();
    check4();
    check5();
    check6();
    check7();
    check8();
    check9();

    $('body').ajaxSuccess(function () {
        check1();
        check2();
        check3();
        check4();
        check5();
        check6();
        check7();
        check8();
        check9();
    });
    //load on widget title click
    $(document).on("click", '#widgets-right .widget-top', function () {
        $(".area").load("/galleries/ #projects > li a");
        check1();
        check2();
        check3();
        check4();
        check5();
        check6();
        check7();
        check8();
        check9();
    });
    //stop default href from working
    $(document).unbind().on("click", '.area a', function () {
        event.preventDefault();
        return;
    });
    //show new forms
    $(document).on('click', '#widgets-right .addNew', function () {
        if (i === 10) {
            alert('thats the max!');
        } else if (i === 9) {
            alert('one more to go be careful now your gonna break me, Now pick one more image!');
            $(".div_" + i).show('slow');
            i = i + 1;
        } else {
            alert(i);
            $(".div_" + i).show('slow');
            i = i + 1;
            alert('Now pick another image');
            return false;
        }
    });
    //remove old forms
    $(document).on('click', '#widgets-right .remNew', function () {
        if (i > 1 && jQuery(this).parent('div').next().is(':visible')) {
            alert('remove me in order please.');
        } else {
            i = i - 1;
            $('.title' + i).val("");
            $('.link' + i).val("");
            $('.img' + i).val("");
            $('.gallery_one' + i).attr("src", '');
            $(this).parent('div').hide('slow');
        }
        return false;
    });
    //load into input boxes 
    $(document).on("click", "#widgets-right .area a", function () {
        $(this).toggleClass('selected');
        var title = $(this).attr('title'),
            link = $(this).attr('href'),
            img = $("img", this).attr('src'),
            imgexample = $("img", this).attr('src');
        if (i <= 2) {
            alert('added to project 1. If you want to add more projects just click button labeled "add new project"!');
            $(".title").val(title);
            $(".link").val(link);
            $(".img").val(img);
            $(".gallery_one").attr("src", imgexample);
        } else {
            i = i - 1;
            alert('added to project ' + i);
            $('.title' + i).val(title);
            $('.link' + i).val(link);
            $('.img' + i).val(img);
            $('.gallery_one' + i).attr("src", imgexample);
            i = i + 1;
        }
    });


}(jQuery));

here's html structure:

<div class="addnew">
<input type="text">
<input type="text">
    <div class="addinput">
        <a href="#" class="addnew">ADD NEW</a>
            <div class="div_2">
                <h4>lorem ipsum</h4>
                <div class="div"><img src="" alt=""></div>
                <p><label for=""></label><input type="text" /></p>
                <a class="remNew" href="">REMOVE</a>
            </div>
            <div class="div_3">
                <h4>lorem ipsum</h4>
                <div class="div"><img src="" alt=""></div>
                <p><label for=""></label><input type="text" /></p>
                <a class="remNew" href="">REMOVE</a>
            </div>
    </div>

\$\endgroup\$
  • \$\begingroup\$ Some HTML would help for context. \$\endgroup\$ – Jonny Sooter Jul 19 '13 at 16:48
  • \$\begingroup\$ @JonnySooter hello again :D Updated with html ! \$\endgroup\$ – vimes1984 Jul 19 '13 at 17:22
  • \$\begingroup\$ I forgot to ask before but a fiddle would be nice :) \$\endgroup\$ – Jonny Sooter Jul 19 '13 at 17:49
  • \$\begingroup\$ @JonnySooter there is a fiddle more or less jsfiddle.net/JrHhJ/5 \$\endgroup\$ – vimes1984 Jul 19 '13 at 18:29
2
\$\begingroup\$

The check stuff is very redundant and should be handled by doing something like this:

var check = [];
for(var i = 1; i < 10; i++) {
    check[i] = (function(i) {
        return function() {
            console.log(i);
            var empty = $("#widgets-right .div_" + i + " p .title" + i + ":input").filter(
                function() {
                    return this.value === "";
                }
            );
            if (empty.length) {
                $('.div_' + i).hide();
            } else {
                $('.div_' + i).show();
            }
        };
    }(i));
}

And then replace all the check calls with this:

function checkAll() {
    $.each(check, function(i) { check[i]() });
}

Later on, you're doing this:

            [...snip...]
            $('.title' + i).val("");
            $('.link' + i).val("");
            $('.img' + i).val("");
            $('.gallery_one' + i).attr("src", '');
            [...snip...]

And then later again, this:

            [...snip...]
            $(".title").val(title);
            $(".link").val(link);
            $(".img").val(img);
            $(".gallery_one").attr("src", imgexample);
            [...snip...]

...and then...

            [...snip...]
            $('.title' + i).val(title);
            $('.link' + i).val(link);
            $('.img' + i).val(img);
            $('.gallery_one' + i).attr("src", imgexample);

I guess you can see where I am going. I won't rewrite this for you, but a hint is that all you need is to write a function with this signature:

function setStuff(i, title, link, img, imgexample) {
    [fill in the blanks here]
}
\$\endgroup\$
  • \$\begingroup\$ One note: if you never need to check the different elements separately, then the above solution can be simplified further. \$\endgroup\$ – Michael Zedeler Jul 20 '13 at 7:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.