Question

如何在不使用hide() and show()方法的情况下使用jQuery导航xml节点。仅使用下一个前一个按钮（如THIS

）替换具有下一个和上一个sibilings的节点

我在PLUNKER DEMO创建了我的演示版。
我使用了hide() and show()。我可以在调试器中看到它显示为display none和block我不喜欢使用它。我想使用像w3schools DEMO这样的导航。任何帮助都会很棒！

Answer 1

选中此Plunker

JS：

$(document).ready(function() {

  var loadVar, numbOfElements=0, count, elementsPerPage = 5,
    currentPage, numberOfPage;

  $.ajax({
    type: "GET", 
    url: "data.xml",
    dataType: "xml",
    contentType:"text/xml", 
    async:false,
    success: function(xml) {
      loadVar = xml;

      loadImages("ADOBE");
      showImages();
      disableEnableBtns();
    },

    error: function() {
      alert("An error occurred while processing XML file.");
    }
  });

  $("#adobe").click(function() {
    loadImages("ADOBE");
    showImages();
    disableEnableBtns();
  });

  $("#mac").click(function() {
    loadImages("MAC");
    showImages();
    disableEnableBtns();
  });

  var sTitle, countEach;

  function loadImages(loadNodeValues) {
    $("#thumbnails").empty();
    numbOfElements=0
    $(loadVar).find(loadNodeValues).each(function(i,item) { 
      var sTitle = "<section class='small count"+(i+1)+"'><h2>" +  $(item).find("CAPTION").text() +  "</h2><span>" +$(item).find("LINK").text() + "</span></section>";
      $("#thumbnails").html($("#thumbnails").html()+sTitle);
      numbOfElements++;
    });
    numberOfPage = numbOfElements / elementsPerPage;

  }

  function showImages() {
    $('.small').hide();
    for (i = 1; i <= elementsPerPage; i++) {
      $('.small').each(function() {
        if ($(this).hasClass('count' + i)) {
          $(this).show();
        }
      });
    }
    currentPage = 0;
  }

  function disableEnableBtns() {

    if (thumbnails.children.length <= elementsPerPage) {
      $("#rightBtn").prop("disabled", true);
      $("#leftBtn").prop("disabled", true);
    } else {
      $("#rightBtn").prop("disabled", false);
      $("#leftBtn").prop("disabled", false);
    }
    $("#leftBtn").prop("disabled", true);
  }

  $("#rightBtn").click(function() {
    currentPage++;
    $('.small').hide();
    var limit = elementsPerPage * (currentPage + 1) > numbOfElements ? numbOfElements : elementsPerPage * (currentPage + 1);

    for (i = (currentPage * elementsPerPage) + 1; i <= limit ; i++) {

      $('.small').each(function() {
        if ($(this).hasClass('count' + i)) {
          $(this).show();
        } 
      });

if(i == numbOfElements)
          {
          $("#rightBtn").prop("disabled", true);
          $("#leftBtn").prop("disabled", false);
          }
          else
          {
       $("#rightBtn").prop("disabled", false);
          $("#leftBtn").prop("disabled", false);
          }
    }

  });

  $("#leftBtn").click(function() {
    currentPage--;
    $('.small').hide();
    for (i = (currentPage * elementsPerPage) + 1; i <= elementsPerPage * (currentPage + 1); i++) {
      $('.small').each(function() {
        if ($(this).hasClass('count' + i)) {
          $(this).show();
        } 
      });

          if(i == 5)
          {
          $("#rightBtn").prop("disabled", false);
          $("#leftBtn").prop("disabled", true);
          }
          else
          {
          $("#rightBtn").prop("disabled", false);
          $("#leftBtn").prop("disabled", false);
          }

    }
  });

});

如何在jQuery中浏览xml节点？

1 个答案: