TADS:Estrutura de Dados: codigos0202
De Wiki Cursos IFPR Foz
Este código cria uma mini calculadora que a pessoa pode escolher qual operação vai ser realizada, os valores, e determina se o resultado sai em azul ou vermelho.
Foi mostrado também como conseguir selecionar um elemento analisando seu atributo. Assim, quando é colocado o seguinte código:
var cor = $("input[name='cor']:checked").val();
o jQuery irá selecionar todos os elementos Input, que possuam um atributo nome com o valor 'cor'.
Já no seguinte código:
$("input[name='linguagem']:checked").each(function(){
saida = saida + $(this).val()+ " ";
});
pode-se ver o uso da função .each(). Esta função deve ser usada quando seu seletor selecionar mais de um elemento, porém você quer trabalhar com os elementos separadamente. Assim, ele cria uma estrutura de repetição, em que podemos acessar os valores separadamente com o uso da palavra this.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script><script>
$(document).ready(function(){
$("#botao").click(function(){
var cor = $("input[name='cor']:checked").val();
var op = $("#operacao").val();
var n1 = new Number($("#num1").val());
var n2 = new Number($("#num2").val());
if(op == "som")
$("#saida").html(n1+n2);
else if (op == "sub")
$("#saida").html(n1-n2);
else if (op == "mult")
$("#saida").html(n1*n2);
$("#saida").css("color", cor );
var saida = $("#saida").html();
$("input[name='linguagem']:checked").each(function(){
saida = saida + $(this).val()+ " ";
});
$("#saida").html(saida);
$("#num1").val("");
$("#num2").val("");
//var antes = $("#saida").html();
//$("#saida").html(antes + "<h1>Ola</h1>");
});
});
</script>
<head></head>
<body>
<select id="operacao">
<option value="som">Somar</option>
<option value="sub">Subtrair</option>
<option value="mult">Multiplicar</option>
</select>
<input type="text" id="num1">
<input type="text" id="num2">
<input type="radio" name="cor" value="blue"><label for="cor">Azul</label>
<input type="radio" name="cor" value="red"><label for="cor">Vermelho</label><br>
<input type="checkbox" name="linguagem" value="C"> C<br>
<input type="checkbox" name="linguagem" value="C++"> C++ <br>
<input type="checkbox" name="linguagem" value="Java"> Java<br>
<input type="checkbox" name="linguagem" value="jQuery"> jQuery<br>
<input type="button" value="Somar" id="botao"><br>
<div id="saida"></div>
</body>
</html>
