CategoryJavascript

Adicionar/Remover campos com javascript

Rotina bem conhecida e muito usada. Mas implementei de uma forma que ao remover campos já adicionados, os demais não sejam apagados.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style>
label { display: block; }
</style>
</head>
<body>

<select name="children-qnt" id="children-qnt">
	<option value="0">0</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
</select>
<fieldset id="children">

</fieldset><!-- #children -->

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var $chidrenQnt = jQuery('#children-qnt'),
	$children = jQuery('#children');



var Children = {};
Children.container = $children;
Children.add = function(i) {
	while (i--) {
		Children.container.append('<label>idade: <input type="text" name="" /></label>');
	}
}
Children.remove = function(i) {
	while (i--) {
		Children.container.find('label:last').remove();
	}
}


$chidrenQnt.on('change', function(){
	var $this = jQuery(this),
		i = $this.val(),
		qnt = $children.find('label').length;


	if (qnt > i) {
		Children.remove(qnt - i);
	}
	if (qnt < i) {
		Children.add(i - qnt);
	}
});


</script>

</body>
</html>

Efeito mostrar – Botão show/hide área spoiler

Poste rápido. Apenas o código mesmo.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

<style>
p { margin: 0; }
.spoiler-area {
    border: 1px solid #000;
    padding: 10px;
    height: auto;
}
.spoiler-area.is-closed { height: 0; overflow: hidden; padding: 10px 0 0; }
</style>
</head>
<body>

<strong>Spoiler</strong> <button data-target="spoiler1" class="btn-spoiler">Show</button>
<div id="spoiler1" class="spoiler-area is-closed">
    <p>Mensagem aqui</p>
</div><!-- .spoiler-area -->

<script>
(function(){
    "use strict";
    var $btns = document.querySelectorAll('.btn-spoiler');
    function loop($els, cb) {
        var i = $els.length;
        while(i--) {
            cb($els[i]);
        }
    }
    loop($btns, function($btn){
        $btn.addEventListener("click", function(){
            var $spoiler = document.getElementById(this.getAttribute("data-target"));
            if( this.innerHTML === "Show" ){
                this.innerHTML = "Hide";
                $spoiler.classList.remove("is-closed");
            } else {
                this.innerHTML = "Show";
                $spoiler.classList.add("is-closed");
            }
        });

    });

}());
</script>
</body>
</html>

Programando Orientado a Eventos – Quiz em multipassos

Apesar de programarmos javascript a muito tempo, parece que às vezes nos esquecemos que a mágica advém da interação que essa linguagem consegue fazer com o usuário. E a forma com que “ouvimos” as ações dos usuários pode ou não deixar nosso código muito confuso, grande e difícil de dar manutenção.

A minha proposta aqui, é sugerir uma organização de como tratamos os comportamentos.

a
Continue reading

Somando inputs ao clicar em checkboxes, com resultado formatado em reais

a

Imagine uma lista de checkboxes. Cada um possui um valor. Ao clicar em cima deles, vai somando em um outro input text todos os checks que estiverem marcados. E ao desmarcar o valor é subtraido.

Continue reading

Alternar background de elementos após clicar em um deles

Situação: dado um certo número de elementos, ao clicar em algum deles, este deve ganhar um background color, porém os demais elementos irmãos dessse, devem “perder”, e voltar para o estado original.

Algoritmo: remover o estado de todos os elementos antes de adicionar naquele que vc clicou.

Código: criei uma função loop(), apenas para iterar sobre os elementos. O restante é bem básico. Uma variável para cachear todos os elementos com a class .box, e um addEventListener para colocar a função no onclick deles.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script src="//polyfill.io/"></script>
<style>
.is-active { background: #f00; }
</style>
</head>
<body>

    <div id="box1" class="box">Clique aqui</div>
    <div id="box2" class="box">Clique aqui</div>
    <div id="box3" class="box">Clique aqui</div>
    <div id="box4" class="box">Clique aqui</div>


<script>
(function () {
    "use strict";
    /*jslint browser: true */

    var $boxes = document.querySelectorAll('.box'),
        loop = function ($els, cb) {
            var i = $els.length;

            while (i > 0) {
                i -= 1;
                cb($els[i]);
            }
        },
        resetBg = function ($els) {
            loop($els, function ($el) {
                $el.classList.remove('is-active');
            });
        };

    loop($boxes, function ($box) {
        $box.addEventListener('click', function () {

            resetBg($boxes);

            this.classList.add('is-active');
        }, false);
    });

}());
</script>
</body>
</html>