So I've made the code that reads news from a website, and then it shows up on my website. Here's what happens:
I read the categories and put them on an array, I check if it exists in the array already or not, and if it doesn't, then I add the category with .push on the array.
What I need is to click the checkbox (multiple checkbox can be clicked/selected), refresh the page and show the news that have the category selected only.
Example:
1
Category: A
Text
2
Category: B
Text
3
Category: B
Text
4
Category: C
Text
If I click the "B" checkbox, only #2 and #3 should appear. If I click both "B" and "C" checkboxes, #2, #3 and #4 should appear.
(As you may notice, I've already tried to getElementById and make it again, but doesn't work, so I deleted showNews function)
Any idea of what to do? My actual code:
var noticiasTodas;
var pagActual = 0;
var numNoticiaPag = 5;
var noticiasActuais;
var categorias;
var arrayC = [];
var count = 0;
$(document).ready(function(){
$.getJSON("http://ift.tt/1HqaxZ2", function(dados){
noticiasTodas = dados.noticias;
categorias = [];
setCategoria();
escreveNoticias();
});
});
// ------- works
function setCategoria() {
noticiasActuais = noticiasTodas;
}
function showNews(){
var p_body = $("#noticiasDiv");
p_body.empty();
for(var i = 0; i < arrayC.length; i++) {
$.each(noticiasActuais, function(index, noticiasActuais){
if(noticiasActuais.categoria == arrayC[i]) {
var linha = "<h2>"+noticiasActuais.titulo+" <span class='category'>"+noticiasActuais.categoria+"</span></h2><h4>"+noticiasActuais.subtitulo+"</h4><p class=\"paragraph\">"+noticiasActuais.artigo+"</p><p class=\"date\">"+noticiasActuais.data+"</p><hr>";
p_body.append(linha);
}
});
}
}
// ------- works
function escreveNoticias() {
var p_body = $("#noticiasDiv");
p_body.empty();
var c_body = $("#checkboxDiv");
c_body.empty();
$.each(noticiasActuais, function(index, noticiasActuais){
var linha = "<h2>"+noticiasActuais.titulo+" <span class='category'>"+noticiasActuais.categoria+"</span></h2><h4>"+noticiasActuais.subtitulo+"</h4><p class=\"paragraph\">"+noticiasActuais.artigo+"</p><p class=\"date\">"+noticiasActuais.data+"</p><hr>";
p_body.append(linha);
var test = arrayC.indexOf(noticiasActuais.categoria);
if(test == -1) {
arrayC.push(noticiasActuais.categoria);
var check = "<input type=\"checkbox\" class=\"check\"><label class=\"checkName\">"+noticiasActuais.categoria+"</label>";
c_body.append(check);
}
});
var elemento = document.getElementById("checkboxDiv");
elemento.addEventListener("click", showNews);
}
h2 {
font-size: 15px;
color: orangered;
font-weight: bold;
}
.category {
font-size: 12px;
color: coral;
}
h4 {
font-size: 13px;
color: dimgray;
font-weight: bold;
font-style: italic;
padding: 8px;
}
.paragraph {
font-size: 12.5px;
color: dimgray;
text-align: justify;
text-justify: inter-word;
background-color: gainsboro;
padding: 12px;
border: 1px;
border-radius: 3px;
}
.paragraph:hover {
background-color: whitesmoke;
}
.date {
font-size: 12px;
color: darkslategrey;
font-style: italic;
}
.check {
}
.checkName {
margin-right: 20px;
margin-left: 5px;
color: coral;
font-weight: normal;
}
.checkCont {
display: block;
text-align: center;
}
<script src="http://ift.tt/1oMJErh"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 3, from LayoutIt!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
<!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
<!--script src="js/less-1.3.3.min.js"></script-->
<!--append ‘#!watch’ to the browser URL, then refresh the page. -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="img/favicon.png">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="page-header">
<h1>
Notícias <small>20-03-2015</small>
</h1>
</div>
</div>
</div>
<!-- Checkbox -->
<div class="checkCont">
<div class="row clearfix">
<div class="col-md-12 column">
<div id="checkboxDiv">
</div>
<hr>
</div>
</div>
</div>
<!-- Notícias -->
<div class="row clearfix">
<div class="col-md-12 column">
<div id="noticiasDiv">
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<ul class="pagination">
</ul>
</div>
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire