Добавление диапазона к изображениям с помощью JQuery

Я пытаюсь создать pinterest как веб-страницу с помощью mansory.js, и у меня возникли проблемы с добавлением уникального описания для каждого изображения. Я знаю, что последняя строка моего кода неверна, но я понятия не имею, как ее исправить. Я в основном добавляю все теги описания в один диапазон для каждого изображения.Добавление диапазона к изображениям с помощью JQuery

Я попытался рассмотреть несколько других вопросов, связанных с stackoverflow, таких как jQuery: Add element after another element и add image/s inside a div with jquery , но не повезло.

Моя вся ручка здесь http://codepen.io/OG/pen/VLEXgz

HTML

<body> 
    <h1>Camper Stories</h1> 
    <div id="content"></div> 
</body>

CSS

h1{ 
    text-align:center; 
    font-family: 'Lobster', cursive; font-size:80px; 
    color:purple; 
} 

#content { 
    width: auto; 
    margin: 0 auto; 
} 

.item { 
    display: inline-block; 
    float: left; 
    width: 300px; 
    height:300px; 
    margin: 2em; 
    position:relative; 
} 

.item img { 
    width: 300px; 
    height: auto; 
}

var url = 'http://www.freecodecamp.com/stories/hotStories'; 
var xmlhttp = new XMLHttpRequest(); 
xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     var myArr = JSON.parse(xmlhttp.responseText); 
     myFunction(myArr); 
    } 
} 
xmlhttp.open("GET", url, true); 
xmlhttp.send(); 

function myFunction(arr) { 
    var i; 
    var headlines = []; 
    //loop through json get need attributes 
    //for(i = 0; i < arr.length; i++){ 
    for (i = 0; i < 5; i++) { 
     var headline = arr[i].headline; 
     headlines.push(headline); 
     var authorImg = arr[i].author.picture; 
     //console.log(img); 
     //error function 
     //if there is no thumbnail link the get author image 
     if (img === "") { 
      $('#content').append('<div class="item">' + '<a href="' + link + '">' + '<img id="myImg" src="' + authorImg + '" alt="' + headline + '" />' + '</a>' + '</div>'); 
     } else { 
      //if there is a thumbnail image then use that image 
      $('#content').append('<div class="item" id="hi">' + '<a href="' + link + '">' + '<img id="myImg" src="' + img + '" alt="' + headline + '" />' + '</a>' + '</div>'); 
      //if there is a 404 error with loading the thumbnail image then use author's image 
      $('img').one('error', function() { 
       this.src = '' + authorImg; 
      }) 
     } 
     $(arr[i].headline).insertAfter("img"); 
    } 
}

источник

2015-07-26 Zaynaib Giwa

Опубликовать ответ образца от вашего ajax и ожидаемого вывода HTML. – lshettyl

Я думаю, вам стоит больше взглянуть на это, var hl = $ ("") .text (arr [i] .headline); $ ("img"). Append (hl); – TheGeekYouNeed

Почему вы используете 'XMLHttpRequest', когда у вас есть jQuery? – Andreas

Смотрите http://codepen.io/anon/pen/YXJvEK Это то, что вы имеете в виду? Добавить заголовок после соответствующего изображения?

$("<span>" + arr[i].headline+"</span>").insertAfter($("img").eq(i));

источник

2015-07-26 08:40:20 artm

Именно это я и имел в виду. Я никогда не знал, что существует функция eq(). Я буду держать этот метод в уме в будущем. Спасибо –

Вы должны строить свои элементы, как это:

var wrapper = $("<div />"); 
var link = $("<href />"); 
var img = $("<img />"); 
...

Затем добавить атрибуты и классы, необходимые и добавлять их друг к другу.

link.append(img); 
wrapper.append(link); 
...

Таким образом ваш код становится намного более ремонтопригодны, и вы можете добавить свой срок легко ваш IMG (не знаю точно, где вы хотите, описание).

Редактировать, поскольку у меня есть руки на компьютере, вот код, который вы могли бы использовать.

function myFunc (data) { 
    if(typeof data === "undefined") return; // output some error 
    for (var i = 0; i < data.length; i++) { 
    var item = data[i]; 
    var upVote = item.rank; 
    var href = item.link; 
    var image = (item.image === "") ? item.author.picture : item.image; 
    var headline = item.headline; 

    // build elements 
    var wrapper = $("<div />"); 
    var link = $("<a />"); 
    var img = $("<img />"); 
    var description = $("<span />"); 

    // add attributes and classes 
    wrapper.addClass("item"); 
    link.attr("href", link); 
    // you can also set multiple attributes at once 
    img.attr({"src": image, "alt": headline}); 
    description.text(headline); // text(string) adds string to element 

    // append elements onto each other 
    link.append(img); 
    wrapper.append(link, description); 

    $("div.content").append(wrapper); // attach elements to DOM 
    } 
}

источник

2015-07-26 08:52:25 TobiasJ

Забыл ссылку codepen: http://codepen.io/anon/pen/LVgrgw – TobiasJ

Что вы называете логическим выражением для переменной изображения? Я видел это много в коде других людей, но я никогда не понимаю, как это называется. Также благодарим вас за показ мне этот шаблон jquery для создания элементов на странице. Это красивее на глазах. –

Вы можете прочитать спецификации на https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Conditional_Operator. В основном это: variable = (if condition)? trueValue: falseValue; – TobiasJ

Добавление диапазона к изображениям с помощью JQuery

ответ

Смежные вопросы