Pasar variables a JavaScript desde HTML

Buenos días,

Tengo el siguiente código js:

$(document).ready(function() {
  $.ajax({
    url: 'http://orueba.blogspot.com.es/feeds/posts/default?alt=json-in-script',
    type: 'get',
    dataType: "jsonp",
    success: function(data) {
      var posturl = "";
      var htmlcode = '<ul>';
      var newhtmlcode = '';
      var tamano_imagen = 700;
      var i = 0;
      var count = 0;
      var fecha = "";
      while ((i < data.feed.entry.length) && (count < 8)) {
        for (var j = 0; j < data.feed.entry[i].link.length; j++) {
          if (data.feed.entry[i].link[j].rel == "alternate") {
            posturl = data.feed.entry[i].link[j].href;
            break;
          }
        }
 
        if ("content" in data.feed.entry[i]) {
          var postcontent = data.feed.entry[i].content.$t;
          if (typeof(data.feed.entry[i].media$thumbnail) != "undefined") {
            var miniatura = data.feed.entry[i].media$thumbnail.url;
            var miniatura = miniatura.replace('s72-c', 's' + tamano_imagen);
          } else {
            var miniatura = "complementos/js/escudo.jpg";
          }
        }
        if ("published" in data.feed.entry[i]) {
          var date_published = data.feed.entry[i].published.$t;
          var fecha = date_published.split('T');
          var yyyy_mm_dd = fecha[0].split('-');
 
          var year = yyyy_mm_dd[0];
          var month = yyyy_mm_dd[1];
          var day = yyyy_mm_dd[2];
 
          switch (month) {
 
            case "01":
              mes = "Enero";
              break;
            case "02":
              mes = "Febrero";
              break;
            case "03":
              mes = "Marzo";
              break;
            case "04":
              mes = "Abril";
              break;
            case "05":
              mes = "Mayo";
              break;
            case "06":
              mes = "Junio";
              break;
            case "07":
              mes = "Julio";
              break;
            case "08":
              mes = "Agosto";
              break;
            case "09":
              mes = "Septiembre";
              break;
            case "10":
              mes = "Octubre";
              break;
            case "11":
              mes = "Noviembre";
              break;
            case "12":
              var mes = "Diciembre";
              break;
          }
 
          fecha = day + " de " + mes + " de " + year;
        } else if ("summary" in data.feed.entry[i]) {
          var postcontent = data.feed.entry[i].summary.$t;
        } else {
          var postcontent = "";
        }
        var re = /<\S[^>]*>/g;
        postcontent = postcontent.replace(re, "");
        var posttitle = data.feed.entry[i].title.$t;
        //reduce postcontent to 300 characters
        if (postcontent.length > 300) {
          postcontent = postcontent.substring(0, 300);
          postcontent = postcontent + ' ...';
        }
 
        htmlcode += '</ul>';
 
        newhtmlcode += "<div class='cuadro_noticia'>" +
          "<div class='foto_noticia'><img src='" + miniatura + "'></div>" +
          "<div class='titular'><h1><a target='_blank' href='" + posturl + "'>" + posttitle + "</a></h1></div>" +
          "<div class='fecha'>" + fecha + "</div>" +
          "<div class='contenido_noticia'><span>" + postcontent + "</span></div>" +
          "<div class='leer_mas'><a target='_blank' class='icono_leer_mas' href='" + posturl + "'>>>Leer más</a></div>" +
          "</div>";
 
        i++;
        count++;
      }
      $('.noticias_blog').append(newhtmlcode);
    }
  });
});

Lo que hace es que cuando en el HTML hay una <div class=noticias_blog> ejecuta un script y carga 8 noticias de un blog. Esto me está generando problemas con masonry. Para solventarlas lo que quiero hacer es quitar el bucle while del js y quiero llamar a cada noticia una a una. Me explico mejor:

En mi HTML ahora mismo hay esto:

<div class="noticias_blog"></div>

y con este trozo de código consigo que todas las noticias se vean, ahora lo que quiero es lo siguiente:

<div class="noticias">
<div class=noticia 1></div>
<div class=noticia 2></div>
<div class=noticia 3></div>
....
</div>

Al llegar a noticia 1 quiero que se ejecute el JavaScript y muestre la noticia 1, lo mismo con todas. Es decir, en el JavaScript quitaríamos el:

while ((i < data.feed.entry.length) && (count<8))

Y simplemente invocaríamos a JavaScript indicando que i=0, 1, 2...

No se si me entienden, porque creo que me he explicado fatal.

Espero que puedan ayudarme, Gracias.

Respuestas

#1

La forma recomendada de pasar variables de HTML a JavaScript es mediante los atributos data. Esto es lo que tendrías que poner en tu HTML:

<div class="noticias">
    <div data="noticia-1"></div>
    <div data="noticia-2"></div>
    <div data="noticia-3"></div>
    ....
</div>

Luego ya con jQuery puedes buscar elementos mediante el valor del atributo data de esta manera:

var noticia1 = $('[data="noticia-1"]');
var noticia2 = $('[data="noticia-2"]');
// ...

De todas formas, creo la clave del problema está en lo que dices de que tienes problemas con Masonry. A lo mejor puedes resolver este problema solo tocando HTML y CSS, en vez de cambiar tu código JavaScript.

@javiereguiluz

24 abril 2017, 8:43