Javascript 我们可以使用XML和Jquery按编号（id）对链接进行排序吗？
我尝试对XML文件中的链接进行排序。我已经使用了jquery中的AJAX，但是我遇到了一些问题。 我想创建链接，按编号排列成可以滑动的面板。 面板可以滑动，但我是使用Jquery和Javascript的初学者，不知道如何使用AJAX导入XML并对其排序。 但是等等，还有更多！在我的XML中，我有一个“commo”部分，每次鼠标经过链接时，我都想在HTML的“commentaire”部分中显示它。。。 我知道这对初学者来说有点复杂，而且我的英语技能不足以解释我想做什么。 这是我的密码：Javascript 我们可以使用XML和Jquery按编号（id）对链接进行排序吗？,javascript,jquery,html,ajax,xml,Javascript,Jquery,Html,Ajax,Xml,我尝试对XML文件中的链接进行排序。我已经使用了jquery中的AJAX，但是我遇到了一些问题。 我想创建链接，按编号排列成可以滑动的面板。 面板可以滑动，但我是使用Jquery和Javascript的初学者，不知道如何使用AJAX导入XML并对其排序。 但是等等，还有更多！在我的XML中，我有一个“commo”部分，每次鼠标经过链接时，我都想在HTML的“commentaire”部分中显示它。。。 我知道这对初学者来说有点复杂，而且我的英语技能不足以解释我想做什么。 这是我的密码： <H
<HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>index intuitif</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>
<body>
<table id = "tableau" border =1>
<td>
<div class="toggle-info" onClick=theme1()>
<h1>Theme 1 </h1>
</div>
<div class="info-panel">
<ul id = "theme1">
<li> <a href= "" onMouseOver=displayBD(1)> Lien 1 </a> </li>
<li> <a href= "" onMouseOver=displayBD(2)> Lien 2 </a> </li>
<li> <a href= "" onMouseOver=displayBD(3)> Lien 3 </a> </li>
<li> <a href= "" onMouseOver=displayBD(4)> Lien 4 </a> </li>
<li> <a href= "" onMouseOver=displayBD(5)> Lien 5 </a> </li>
<li> <a href= "" onMouseOver=displayBD(6)> Lien 6 </a> </li>
<li> <a href= "" onMouseOver=displayBD(7)> Lien 7 </a> </li>
</ul>
</div>
</td>
<td>
<div class="toggle-info">
<h1>Theme 2 </h1>
</div>
<div class="info-panel" onClick=theme2()>
<ul id = "theme2">
<li> <a href= "" onMouseOver=displayBD(1)> Lien 1 </a> </li>
<li> <a href= "" onMouseOver=displayBD(2)> Lien 2 </a> </li>
<li> <a href= "" onMouseOver=displayBD(3)> Lien 3 </a> </li>
<li> <a href= "" onMouseOver=displayBD(4)> Lien 4 </a> </li>
<li> <a href= "" onMouseOver=displayBD(5)> Lien 5 </a> </li>
<li> <a href= "" onMouseOver=displayBD(6)> Lien 6 </a> </li>
<li> <a href= "" onMouseOver=displayBD(7)> Lien 7 </a> </li>
</ul>
</div>
</td>
<td>
<div class="toggle-info">
<h1>Theme3</h1>
</div>
<div class="info-panel" onClick=theme3()>
<ul id= "theme3">
<li> <a href= "" onMouseOver=displayBD(1)> Lien 1 </a> </li>
<li> <a href= "" onMouseOver=displayBD(2)> Lien 2 </a> </li>
<li> <a href= "" onMouseOver=displayBD(3)> Lien 3 </a> </li>
<li> <a href= "" onMouseOver=displayBD(4)> Lien 4 </a> </li>
<li> <a href= "" onMouseOver=displayBD(5)> Lien 5 </a> </li>
<li> <a href= "" onMouseOver=displayBD(6)> Lien 6 </a> </li>
<li> <a href= "" onMouseOver=displayBD(7)> Lien 7 </a> </li>
</ul>
</div>
</td>
</table>
<div id="commentaire">
Bonsoir
</div>
<script>
var nbr_lignes = document.getElementById('tableau').rows.length;
var nbr_colonnes = document.getElementById('tableau').getElementsByTagName('tr')[0].getElementsByTagName('td').length;
var nbr_colonnes = document.getElementById('tableau').rows[0].cells.length;
var themeSelect ;
var i = 0 ;
var ndecs;
var contenu=" ";
var results = new Array ;
var descrithem1= new Array;
var descrithem2= new Array;
var descrithem3= new Array;
var length1 = $('#theme1 > *').length;
var length2 = $('#theme2 > *').length;
var length3 = $('#theme3 > *').length;
var lengthmax1= length1;
var lengthmax2= length2;
var lengthmax3= length3;
var themeSelect;
var commentaira;
var $xml= $.parseXML('<bds> <serie1 id="1"> <desc> <num> 2 </num><title>we are on 1 </title><commen>HI </commen><URL>Idk</URL></desc><desc><num> 1 </num><title>we are on 2 </title><commen>Hello world </commen><URL>Baptiste</URL></desc></serie1></bds>')
/*
function theme1(){
themeSelect = 1 ;
}
function theme2(){
themeSelect = 2 ;
}
function theme3(){
themeSelect = 3 ;
}
function ajout(){
var themeajout=prompt("theme to add");
if (themeajout==1)
{
ndecs = prompt ("new description");
descrithem1.push(ndecs);
}
if (themeajout==2)
{
ndecs = prompt ("new description");
descrithem2.push(ndecs);
}
if (themeajout==3)
{
ndecs = prompt ("new description");
descrithem3.push(ndecs);
}
}
function affichage ()
{
var div = document.getElementById("commentaire");
div.textContent = descri[i];
var text = div.textContent;
}
*/
/*
function ajoutLien(){
var numtheme = prompt("numero de votre theme");
if (numtheme == 1)
{
lengthmax1= lengthmax1 +1 ;
document.getElementById('theme1').innerHTML += "<li> <a href= \"\" id=\"3-1\" onMouseOver=Lien(1)> Lien " + lengthmax1 +" </a> </li>";
}
if (numtheme == 2)
{
lengthmax2= lengthmax2 +1 ;
document.getElementById('theme2').innerHTML += "<li> <a href= \"\" id=\"3-1\" onMouseOver=Lien(1)> Lien " + lengthmax2 +" </a> </li>";
}
if (numtheme == 3)
{
lengthmax3= lengthmax3 +1 ;
document.getElementById('theme3').innerHTML += "<li> <a href= \"\" id=\"3-1\" onMouseOver=Lien(1)> Lien " + lengthmax3 +" </a> </li>";
}
}
*/
$(function() {
$(".toggle-info").on("click", function() {
if($(this).next(".info-panel").attr('style') == 'display: block;'){
$(this).next(".info-panel").slideUp(200);
} else {
$(".info-panel").each(function(){
$(this).slideUp(200);
});
$(this).next(".info-panel").slideToggle(200);
}
});
$(".info-panel").on("click", function() {
$(this).slideUp(200);
});
});
$(document).ready(
function()
{$.ajax({
type: "GET",
url: "text.xml",
dataType: "xml",
success: function(xml)
{
$(xml).find('bds').each(
function()
{
var id = $(this).attr('id');
alert (id);
$(this).find('desc').each(
function()
{
var commen = $(this).find('commen').text();
var title = $(this).find('title').text();
var URL = $(this).find('URL').text();
});
});
}
});
}
);
$($xml).find('serie1').each(function() {
var commen = $(this).find('commen').text();
var title = $(this).find('title').text();
var URL = $(this).find('URL').text();
var num = $(this).find('num').text();
results.push({
id: $(this).attr('id'),
num : num,
commen: commen,
title: title,
URL: URL
});
})
results.sort(function(a, b) {
return a.num > b.num;
});
var html=[];
$.each(results, function() {
html.push('<div>commentaires : ' + this.commen + '</div>')
})
$('body').append( html.join(''))
function displayBD(inte)
{
alert(this.results);
if (this.num ==inte)
{commentaira = results.commen;
document.getElementById("commentaire").innerHTML = results.commen;
}
alert(commentaira);
}
</script>
<style type='text/css'>
.toggle-info {
cursor: pointer;
}
.info-panel {
display: none;
cursor: pointer;
}
* { font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: .95em; }
fieldset { margin: 15px; padding-left: 1em; padding-right: 1em; padding-bottom: 1em; }
legend { margin: 10px; }
#outputBDFieldset { display: none; }
#nbBD { font-weight: normal; }
</style>
</body>
</HTML>
指数直觉F
主题1
主题2
主题3
晚安
var nbr_lignes=document.getElementById（'tableau'）.rows.length；
var nbr_colonnes=document.getElementById（'tableau'）.getElementsByTagName（'tr'）[0].getElementsByTagName（'td'）.length；
var nbr_colonnes=document.getElementById（'tableau'）。行[0]。单元格。长度；
变量选择；
var i=0；
var-ndecs；
var contenu=“”；
var结果=新数组；
var descriphem1=新数组；
var descriphem2=新数组；
var descripethm3=新数组；
变量length1=$（'#theme1>*'）。长度；
变量length2=$（'#theme2>*'）。长度；
变量length3=$（'#theme3>*'）。长度；
var lengthmax1=length1；
var lengthmax2=长度2；
var lengthmax3=长度3；
变量选择；
艾拉变种；
var$xml=$.parseXML（'2我们在1 HI Idk 1我们在2 Hello world Baptiste'）
/*
函数theme1（）{
themeSelect=1；
}
函数theme2（）{
themeSelect=2；
}
函数theme3（）{
themeSelect=3；
}
函数ajout（）{
var themeajout=提示（“要添加的主题”）；
如果（最大值==1）
{
ndecs=提示（“新说明”）；
描述1.推送（无损检测）；
}
如果（最大值==2）
{
ndecs=提示（“新说明”）；
描述2.推送（NDEC）；
}
如果（最大值==3）
{
ndecs=提示（“新说明”）；
描述3.推送（无损检测）；
}
}
函数附加（）
{
var div=document.getElementById（“注释”）；
div.textContent=desci[i]；
var text=div.textContent；
}
*/
/*
函数{
var numtheme=提示（“主题编号”）；
if（numtheme==1）
{
lengthmax1=lengthmax1+1；
document.getElementById（'theme1'）。innerHTML+=“”；
}
if（numtheme==2）
{
lengthmax2=lengthmax2+1；
document.getElementById（'theme2'）。innerHTML+=“”；
}
if（numtheme==3）
{
lengthmax3=lengthmax3+1；
document.getElementById（'theme3'）。innerHTML+=“”；
}
}
*/
$（函数（）{
$（“.toggle info”）。打开（“单击”，函数（）{
if（$（this）.next（“.info panel”）.attr（'style'）=='display:block；'）{
$（this.next（“.info panel”）.slideUp（200）；
}否则{
$（“.info面板”）。每个（函数（）{
美元（本）.slideUp（200）；
});
$（this）.next（“.info panel”）.slideToggle（200）；
}
});
$（“.info面板”）。在（“单击”，函数（）{
美元（本）.slideUp（200）；
});
});
$（文件）。就绪（
函数（）
{.ajax({
键入：“获取”，
url:“text.xml”，
数据类型：“xml”，
成功：函数（xml）
{
$（xml）。查找（'bds'）。每个（
函数（）
{
var id=$（this.attr（'id'）；
警报（id）；
$（this.find（'desc'）。每个(
函数（）
{
var commo=$（this.find（'commo'）.text（）；
var title=$（this.find（'title'）.text（）；
var URL=$（this.find（'URL'）.text（）；
});
});
}
});
}
);
$（$xml）.find（'serie1'）.each（有趣
<?xml version="1.0" encoding="iso-8859-1"?>
<bds>
<serie1 id="1">
<desc>
<num> 1 </num>
<title>nous sommes sur le lien 1 </title>
<commen>Hello </commen>
<URL>Baptiste</URL>
</desc>
<desc>
<num> 2 </num>
<title>nous sommes sur le lien 2 </title>
<commen>HI </commen>
<URL>Baptiste</URL>
</desc>
<desc>
<num> 3 </num>
<title>nous sommes sur le lien 3 </title>
<commen>How are you </commen>
<URL>Gars inconnu</URL>
</desc>
<desc>
<num> 4 </num>
<title>nous sommes sur le lien 4 </title>
<commen>Idk </commen>
<URL>Raymond</URL>
</desc>
<desc>
<num> 5 </num>
<title>nous sommes sur le lien 5 </title>
<commen>Thank you </commen>
<URL>Eric</URL>
</desc>
<desc>
<num> 6 </num>
<title>nous sommes sur le lien 6 </title>
<commen>You're welcome </commen>
<URL>Baptiste</URL>
</desc>
<desc>
<num> 7 </num>
<title>nous sommes sur le lien 7 </title>
<commen>Sorry </commen>
<URL>Céline</URL>
</desc>
</serie1>
<serie2 id="2">
<desc>
<num> 1 </num>
<title>nous sommes sur le lien 1 </title>
<commen>Hello </commen>
<URL>Baptiste</URL>
</desc>
<desc>
<num> 2 </num>
<title>nous sommes sur le lien 2 </title>
<commen>HI </commen>
<URL>Baptiste</URL>
</desc>
<desc>
<num> 3 </num>
<title>nous sommes sur le lien 3 </title>
<commen>How are you </commen>
<URL>Gars inconnu</URL>
</desc>
<desc>
<num> 4 </num>
<title>nous sommes sur le lien 4 </title>
<commen>Idk </commen>
<URL>Raymond</URL>
</desc>
<desc>
<num> 5 </num>
<title>nous sommes sur le lien 5 </title>
<commen>Thank you </commen>
<URL>Eric</URL>
</desc>
<desc>
<num> 6 </num>
<title>nous sommes sur le lien 6 </title>
<commen>You're welcome </commen>
<URL>Baptiste</URL>
</desc>
<desc>
<num> 7 </num>
<title>nous sommes sur le lien 7 </title>
<commen>Sorry </commen>
<URL>Céline</URL>
</desc>
</serie2>
<serie3 id="3">
<desc>
<num> 1 </num>
<title>nous sommes sur le lien 1 </title>
<commen>Hello </commen>
<URL>Baptiste</URL>
</desc>
<desc>
<num> 2 </num>
<title>nous sommes sur le lien 2 </title>
<commen>HI </commen>
<URL>Baptiste</URL>
</desc>
<desc>
<num> 3 </num>
<title>nous sommes sur le lien 3 </title>
<commen>How are you </commen>
<URL>Gars inconnu</URL>
</desc>
<desc>
<num> 4 </num>
<title>nous sommes sur le lien 4 </title>
<commen>Idk </commen>
<URL>Raymond</URL>
</desc>
<desc>
<num> 5 </num>
<title>nous sommes sur le lien 5 </title>
<commen>Thank you </commen>
<URL>Eric</URL>
</desc>
<desc>
<num> 6 </num>
<title>nous sommes sur le lien 6 </title>
<commen>You're welcome </commen>
<URL>Baptiste</URL>
</desc>
<desc>
<num> 7 </num>
<title>nous sommes sur le lien 7 </title>
<commen>Sorry </commen>
<URL>Céline</URL>
</desc>
</serie3>
</bds>