使用jQuery获取img id并从XML数据中选择节点
我正在尝试创建一个应用程序,通过动画gif幻灯片、相关命令列表和说明帮助演示AutoCAD中的不同工具。单击图像图标时加载信息,下面提供了一个片段使用jQuery获取img id并从XML数据中选择节点,xml,ajax,jquery,Xml,Ajax,Jquery,我正在尝试创建一个应用程序,通过动画gif幻灯片、相关命令列表和说明帮助演示AutoCAD中的不同工具。单击图像图标时加载信息,下面提供了一个片段 <img class="toolicons" id="rectangle" /> <img class="toolicons" id="circle" /> 你可以用 代码示例(无错误检查和验证): 无论如何,我将以不同的方式对其进行编程: 仅在首次使用时或在页面/DOM加载后加载XML一次 解析XML数据并将其存储在ja
<img class="toolicons" id="rectangle" />
<img class="toolicons" id="circle" />
你可以用
代码示例(无错误检查和验证):
无论如何,我将以不同的方式对其进行编程:
- 仅在首次使用时或在页面/DOM加载后加载XML一次
- 解析XML数据并将其存储在javascript结构中,工具名作为键
- 单击图像时,获取其ID并在javascript结构中查找工具信息
关于两年后我决定重新审视这个项目(从那时起我已经走了很长一段路),不管怎样,你的解决方案帮了我不少忙,所以谢谢。
<p id="toolName">Tool Name</p>
<p id="toolCmd">Tool Command 1, Tool Command 2</p>
<p id="toolDesc">Tool Description</p>
<img id="toolSlide" src="default-placeholder.gif" />
<ACAD>
<TOOL>
<NAME>rectangle</NAME>
<CMD>
<CMD_01>REC</CMD_01>
<CMD_02>RECTANG</CMD_02>
<CMD_03>RECTANG</CMD_03>
</CMD>
<DESCRIPTION>Draws a rectangle</DESCRIPTION>
<SLIDESHOW>rectangle.gif</SLIDESHOW>
</TOOL>
<TOOL>
<NAME>circle</NAME>
<CMD>
<CMD_01>C</CMD_01>
<CMD_02>CIRCLE</CMD_02>
</CMD>
<DESCRIPTION>Draws a circle</DESCRIPTION>
<SLIDESHOW>circle.gif</SLIDESHOW>
</TOOL>
</ACAD>
$(function(){
$(".toolicons").click(function(){
$.ajax({
type: "GET",
url: "acad.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('TOOL').each(function(){
var tName = $(this).find('NAME').text();
var tDesc = $(this).find('DESCRIPTION').text();
$(this).find('CMD').each(function(){
var tCmd1 = $(this).find('CMD_01').text();
var tCmd2 = $(this).find('CMD_02').text();
var tCmd3 = $(this).find('CMD_03').text();
});
});
}
// change html in p elements from xml data
});
});
});
jQuery(document).ready(function()
{
jQuery(".toolicons").click(function(e)
{
e.preventDefault();
var id = jQuery(this).attr('id');
jQuery.ajax({
type: "GET",
url: "acad.xml",
dataType: "xml",
success: function(xml) {
var jqToolName = jQuery(xml).find('NAME:contains("' + id + '")');
var jqTool = jqToolName.parent();
var tName = jqTool.find('NAME').text();
var tDesc = jqTool.find('DESCRIPTION').text();
// console.log(tName, tDesc);
}
});
});
});