使用jQuery获取img id并从XML数据中选择节点

I trying to create an app that helps demonstrate different tools in AutoCAD with an animated gif slideshow, a list of associated commands and a description. The information loads upon clicking an image icon, a snippet is provided below.

我尝试创建一个应用程序，帮助在AutoCAD中演示不同的工具，带有动画gif幻灯片，相关命令列表和描述。点击图片图标后会加载信息，下面提供了一个代码段。

<img class="toolicons" id="rectangle" />
<img class="toolicons" id="circle" />

Which affects the following:

这会影响以下内容：

<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" />

I want the information to be retrieved from an XML file since there are several tools that I might describe later and add to the XML, also wanting to avoid defining long string variables for the description.

我希望从XML文件中检索信息，因为我可能稍后会描述几个工具并添加到XML中，还希望避免为描述定义长字符串变量。

<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>

I'm trying to use jQuery to do this. I shouldn't be using .each() since I only want to retrieve one entity, not parse all of them.

我正在尝试使用jQuery来做到这一点。我不应该使用.each（），因为我只想检索一个实体，而不是解析所有实体。

I've attempted to look this up but I can't find anything demonstrating a comparison between HTML id attribute and XML data, then taking just the data.

我试图查看这个，但我找不到任何演示HTML id属性和XML数据之间的比较，然后只获取数据。

$(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
      });
    });
});

1 个解决方案

#1

You can use :contains() selector

您可以使用：contains（）选择器

Code example (without error checking neither validation):

代码示例（没有错误检查既不验证）：

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);
            }
        });
    });
});

Anyway, i will program it in a different way:

无论如何，我将以不同的方式编程：

load the XML only once, on first use or after page/DOM load,
在第一次使用时或在页面/ DOM加载后仅加载一次XML，
parse the XML data and store it in a javascript structure, with the tool name as key
解析XML数据并将其存储在javascript结构中，并将工具名称作为键
when an image is clicked, gets its ID and look for the tool information in the javascript structure
单击图像时，获取其ID并在javascript结构中查找工具信息

Regards

问候

#1