Question

我是jQuery的新手并寻找解决方案，如何在HTML页面上添加ul id = "animalsListDetails"列表，隐藏/显示以及渲染此范围，点击a-ref：

function renderAnimalsList(data) {
    var list = data == null ? [] : (data instanceof Array ? data : [data]);

    $('#animalsList li').hide();
    $('#animalsListDetails li').hide();
    $.each(list, function (index, animals){ 

        $('.animals').click(function () {
        $(this).next().slideToggle();
    }).append('<ul id="animalsList"><li><a href="#"> Animal Id: ' + animals.id + '</a><br> <ul id="animalsListDetails"><li> Name: '+ animals.animalname + '<br> Birthday: ' + animals.dateborn + '<br> Sex: ' + animals.sex + '<br> Type animal: ' + animals.typesanimalsId + '</li></ul></li></ul>');
});

}

通话功能：

function findAnimalByCustomerId(customerId){
    console.log('findAnimalByCustomerId: ' + customerId);
    $.ajax({
        type: 'GET',
        url: customerlistURL + '/' + customerId + '/myanimals',
        dataType: "json",
        success: function (data) {
            console.log('findAnimalByCustomerId success: ' + customerId);
            renderAnimalsList(data);
        }
    });
}

HTML：

<div class="animals">


    </div>

Answer 1

如果问题的主要动机是知道如何添加列表，则以下答案显示使用模拟数据。如果您想了解更多信息，请在评论中提问（尝试立即定义您的问题）。

function renderAnimalsList(data) {
  var list = data == null ? [] : (data instanceof Array ? data : [data]);

  $('#animalsList li').hide();
  $('#animalsListDetails li').hide();
  $.each(list, function(index, animals) {

    $('.animals').click(function() {
      console.log(this);
      $(this).next().slideToggle();
    }).append('<ul id="animalsList"><li><a href="#"> Animal Id: ' + animals.id + '</a></li>');
    //whith details
    $('#animalsList').append('<ul id="animalsListDetails"><li>Name: ' + animals.animalname + '<br> Birthday: ' + animals.dateborn + '<br> Sex: ' + animals.sex + '<br> Type animal: ' + animals.typesanimalsId + '</li></ul>');
  });
}

var animals = [{
  animalname: 'Tiger',
  dateborn: '----.--.--',
  sex: 'M',
  typesanimalsId: 1,
  id: 10
}, {
  animalname: 'Tiger 2',
  dateborn: '----.--.--',
  sex: 'M',
  typesanimalsId: 1,
  id: 11
}, {
  animalname: 'Tiger 3',
  dateborn: '----.--.--',
  sex: 'M',
  typesanimalsId: 1,
  id: 12
}]

function findAnimalByCustomerId(customerId) {
  // This function is useless in this context
  console.log('findAnimalByCustomerId: ' + customerId);
  $.ajax({
    type: 'GET',
    url: customerlistURL + '/' + customerId + '/myanimals',
    dataType: "json",
    success: function(data) {
      console.log('findAnimalByCustomerId success: ' + customerId);
      renderAnimalsList(data);
    }
  });
}

//This ready function will be calling renderAnimalsList in same way as it will be called in above findAnimalByCustomerId
$(document).ready(function() {
  renderAnimalsList(animals);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="animals">
  <div id="animalsList"></div>
  <div id="animalsListDetails"></div>
</div>

Answer 2

这是解决方案：

(function($, undefined){
 $(function(){
 $(document).ready(function(){


//bind handlers
function domHandlers() {
    $('.animal-id').click(function(e){
        slideToggle(e);
    });
}


function renderAnimalsList(jsonData) {
    var list = jsonData;

    $.each(list, function (i, animal) {
        $('#animalsList').append('<li><a href="#!" class="animal-id"> Animal Id: '   + animal.id + '</a></li>');

        //With details:
        $('#animalsList').append('<li class="animal-details hidden">' +
            'Name: ' + animal.animalname + '<br>' +
            'Birthday: ' + animal.dateborn + '<br>' +
            ' Sex: ' + animal.sex + '<br>' +
            ' Type animal: ' + animal.typesanimalsId + '</li>');
    });
}


function slideToggle(e) {

    $('.animal-details ').addClass('hidden');
    $(e.target).closest('li').next().removeClass('hidden');

}


renderAnimalsList(jsonData);

domHandlers();
   });
  });
})

JQuery在范围内隐藏/ slideToggle elem

2 个答案: