Code Improvement

Question

Code Improvement

Navigation

#1 by (2 votes)

3

I'm 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 of displaying the image and doing some onclick function. However, in content exchange I have to return the content number. Checking the code below, do you have any tips to give me so that I can get the code cleaner and better to work with? Because in this code I only work with 2 contents, however my project has to work with 30 contents. It's going to be a lot of work. hehe. Thank you so much 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();
        }

javascript html jquery

asked by anonymous 09.12.2016 / 18:24

1 answer

identify a click outside the div with jquery How to put the same animation on two canvas at the same time?

score 2 · Accepted Answer

You can start by better organizing HTML, elements do not have to have an ID to capture your click or 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-switcher as you 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 do not need to put ID's in the elements because there are classes in jquery where you can manipulate even the elements around the target where you captured the click.

When using the next() function, be careful because if you or someone needs to change the layout and add another div between .box and .mostraBox the script will not work, however we can use another mode too, see example below ;

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

With the parent() function you search for the div that is "above" the button (in the content-switcher case) and search WITH% of a% div with class content-switcher , so you can add any other div within .box that the script will continue to work.