Использование jQuery для получения img id и выбора узла из данных XML

Question

Я пытаюсь создать приложение, которое помогает демонстрировать различные инструменты в AutoCAD с помощью слайд-шоу с анимированным GIF, списком связанных команд и описанием. Информация загружается при нажатии на значок изображения, фрагмент приведен ниже.

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

Что влияет на следующее:

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

Я хочу, чтобы информация извлекалась из файла 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>

Я пытаюсь использовать jQuery для этого. Мне не следует использовать .each (), поскольку я хочу получить только одну сущность, а не анализировать их все.

Я попытался это выяснить, но не могу найти ничего, демонстрирующего сравнение атрибута 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
      });
    });
});

Answer 1

Вы можете использовать : содержит () селектор

Пример кода (без проверки ошибок и проверки):

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

В любом случае, я запрограммирую его вдругой способ:

• загрузить XML только один раз, при первом использовании или после загрузки страницы / DOM,
• проанализировать данные XML и сохранить их в структуре javascript с именем инструментакак ключ
• при нажатии на изображение, получает его идентификатор и ищет информацию об инструменте в структуре javascript

С уважением