Code improvement

Question

I am doing a college job, to show the benefit of user interactivity with jquery. The way I did it was: Content is responsible for the part showing the image and doing some onclick function. However, in the content exchange I have to return the content number. Checking the code below, do you have any tips to give me so you can make the code cleaner and better to work with? Because in this code only work with 2 Contents, however my project have to work with 30 Contents. will be a lot of work. hehe. Thanks a lot guys! this site is awesome!

CSS:

 .slide{
            position:relative;
            width:1000px;
            height:700px;
            margin:0auto;
        }
        .slide img {
            position: absolute;

        }
        .content-switcher{
            display:none;
        }

        .clicarinicio {
            width: 130px;
            height: 100px;
            border: 5px solid #FF0000;
            position: absolute;
            display:none;
            bottom:0;

        }

        .clicarinicio2 {
            width: 130px;
            height: 100px;
            border: 5px solid blue;
            position: absolute;
            display:none;
            top:0;

        }

HTML:

<div class="slide">
        <div class="content-switcher" id="Content1">
            <img src="img/1inicio.jpg" style="height:100%;" />
            <div class="mostraBox" style="display:none;width:100px;height: 20px; right:0; position: absolute; color: white;">Clique no botao Iniciar</div>
            <div class="clicarinicio"></div>

        </div>

        <div class="content-switcher" id="Content2">
            <img src="img/2botao.jpg" style="height:100%;" />
            <div class="mostraBox2" style="display:none;width:100px;height: 20px; right:0; position: absolute; color: white;">Abriu o painel! Clique em Alguma coisa</div>
            <div class="clicarinicio2"></div>

        </div>




    </div>

SCRIPT

 $(document).ready(function () {

            selectStep(1);

             $('.clicarinicio').on('click', function () {
                 return selectStep(2);
                });


        }); //FIM DE DOCUMENT READY


        function selectStep(n) {


            if (n == 1) {

                $('.clicarinicio').fadeIn("slow").delay(3000).show();
                $('.mostraBox').fadeIn("slow").delay(10000).show();
            }

            if (n == 2) {

                $('.clicarinicio2').fadeIn("slow").delay(3000).show();
                $('.mostraBox2').fadeIn("slow").delay(10000).show();
            }

            $(".content-switcher").hide();
            $("#Content" + n).show();
        }

Answer 1

You can start by organizing the HTML better, the elements do not need to have an ID to capture your click or the element itself, for example;

<div class="slide">

<div class="content-switcher">
    <button class="mostraBox">
      Clique - conteudo 1
    </button>
    <div class="box">Conteudo 1</div>
</div>

<div class="content-switcher">
    <button class="mostraBox">
      Clique - conteudo 2
    </button>
    <buton class="box">Conteudo 2</button>
</div>

So you can add as many content-switcheryou want...

To capture the click action do;

$(document).ready(function() {
    $('.mostraBox').on('click', function() { // Captura o click
        $(this).next('.box').fadeIn('slow'); 
        // Pega o proximo elemento 
        // (abaixo da div .mostrabox que é a div onde esta o conteudo) 
        // e aplica o efeito fadeIn.
    });
});

Note that you don’t need to put ID’s on the elements because there are classes in jquery where you can manipulate even the elements around the target you’ve captured the click on.

When using the function next() take care because if you or someone needs to change the layout and add another div between .box and .mostraBox the script will not work, but we can use another mode as well, see in the example below;

$(document).ready(function() {
   $('.mostraBox').on('click', function() { // Captura o click
      $(this).parent().find('.box').fadeIn('slow'); 
   });
});

With the function parent() you search the div that is "above" the button (in case content-switcher) and search WITHIN the content-switcher a div with class .box, this way you can add any other div within the content-switcher that the script will continue working.