JQuery hide/slideToggle elemスコープ

Question

jQueryを新しく解説し、解決策を探しています。ul id = "animalsListDetails"のリストを追加する方法、HTMLページに表示/非表示を設定して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($, 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(); 
    }); 
    }); 
}) 

Answer 2

質問の主な動機は、リストを追加する方法を知ることである場合、回答には模擬データで示されます。あなたがもっと知りたいのであれば、コメントで尋ねてください（一度に問題を定義してみてください）。ここで

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>