Получение кнопки для отображения следующей итерации цикла из XML-файла

#javascript #arrays #xml #loops #button

#javascript #массивы #xml — файл #циклы #кнопка #xml

Вопрос:

Хорошо, итак, вот что я пытаюсь сделать. У меня есть XML-файл, содержащий 1000 объявлений для моего работодателя, и он хочет, чтобы в каждом объявлении отображался по одному элементу за раз. У меня загружен XML-файл, и я могу заставить его опубликовать первое объявление, но я понятия не имею, как заставить его перейти к следующему элементу в цикле или вернуться назад, с чем у меня возникли проблемы. Вот код для попытки продвинуться вперед.

 var x=xmlDoc.getElementsByTagName("item");
for (i=0;i<x.length;i  ) {
    x= x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
    break;
}

document.getElementById("classified").innerHTML =x;  

function forward() {
    var text ="";
    var x=xmlDoc.getElementsByTagName("item");
    for (i=0;i<x.length;i  ) {
        x= x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
        continue;
    }
    document.getElementById("classified").innerHTML = x;
}
  

Итак, чего я пытаюсь добиться, так это того, что нажатием кнопки я могу опубликовать следующее объявление и удалить первое, представленное кнопкой «Вперед», и получить кнопку «Назад», чтобы сделать прямо противоположное

Комментарии:

1. Итак , вы хотите вручную просмотреть 1000 объявлений с помощью двух кнопок ?

2. Вы имеете в виду кнопки истории браузера под кнопками вперед / назад или некоторые button кнопки, расположенные в вашем HTML?

Ответ №1:

Вы можете сохранить все описания вашего объявления в массиве и запомнить текущий индекс (тот, который был показан). ДЕМОНСТРАЦИЯ.

Пример кода. Я предполагаю, что у вас есть две кнопки с идентификаторами назад / вперед где-то на вашей странице.

 var fakeAds = Array.apply(null, new Array(1000)).map(function(_, i){
    return 'some random text '   (i 1);
}), //replace with actual data
     idx = 0, //current index
     display = document.getElementById('display'), //where to show
     total = fakeAds.length; //total number of ads

function show() { //actually show ad at current idx.
    display.innerHTML = fakeAds[idx];        
}

document.getElementById('back').addEventListener('click', function(){
    --idx < 0 amp;amp; (idx = total - 1); //decrement index and show
    show();
});

document.getElementById('forward').addEventListener('click', function(){
    idx =   idx%total; //increment index and show
    show();
});

show(); //do show starting index.
  

Комментарии:

1. Да, у меня есть две кнопки вперед и назад

Ответ №2:

Вот две функции, которые вам нужны: ДЕМО

Исходя из вашего кода, вот как сначала извлечь все item из вашего XML-файла, а затем с помощью цикла вы получаете каждое description из них. Это сгенерирует список, хранящийся в вашей x переменной.

Это создает список всех элементов элемента в вашем XML-файле (это полный метод ниже)

 var connectXMLFile = new XMLHttpRequest();
  

Определите, какой файл открыть, и отправьте запрос

 connectXmlFile.open("GET","PathToYourXMLFile.xml", false);
connectXMLFile.setRequestHeader("Content-Type", "text/xml");
connectXMLFile.send(null);
  

Получить ответ и все item элементы

 var xmlDoc = connectXMLFile.responseXML;
var x=xmlDoc.getElementsByTagName("item");
  

Представляет список объявлений, которые вы получили

 var adsList = [];
  

Затем выполните цикл, чтобы получить каждый из них description и добавить его в список

 for (var i=0;i<x.length;i  ) {
   adsList.push(x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
}
  

Представляет текущее показанное объявление

 var adNumber = 0;

function forward() {
    if (adNumber >= adsList.length) adNumber = 0;
    document.getElementById("ad").innerHTML = adsList[adNumber];
    adNumber  ;
}


function backwards() {
    if (adNumber == 0) adNumber = adsList.length;
    document.getElementById("ad").innerHTML = adsList[adNumber - 1];
    adNumber--;
}
  

Это основано на предоставленном вами коде, если вам нужно какое-либо объяснение, не стесняйтесь спрашивать.

Комментарии:

1. Спасибо за ответ. Мне нравится, как это работает, однако я не уверен, как преобразовать имеющийся у меня XML-файл в raid для чтения этими функциями.

2. Я отредактировал свой пост, чтобы показать вам, как получить ваш список из XML-файла.

3. Должен ли я поместить код запроса в заголовок документа? Также XML-файл сохраняется на том же сервере, что и веб-сайт.

4. Нет, код запроса должен быть в javascript, это не настоящий запрос, просто способ javascript для просмотра в файле. Что касается вашего пути к XML, это классический способ 🙂