在单击事件中，我试图根据单击对象's attr()值从XML中获取数据

on click event I am trying to get the data from XML as per the click object's attr() value

本文关键字：单击 attr XML 数据 获取 值从 对象 事件      更新时间：2023-09-26

在点击事件上，我试图从XML中获得数据，根据点击对象的attr()值。

下面我放置了两个超链接按钮和一个用于输入数据的容器。两者具有不同的attr()值

所以我想根据这些超链接的attr()值来获取数据

甚至我已经创建了一个具有各自节点的XML。但无法得到确切的数据。有人能帮忙吗?

下面是JS和XML代码:

JS代码:

$(function() {
        $('a.readmore').click(function() {
            var container = $('#uiWrapper');
            $.get('myxml3.xml',function(data){
                container.empty();
                $(data).find('sector').each(function(){
                    var $tag = $(this), 
                        getName = $('a.readmore').attr('href');
                    var html = '<div class="data">';                      
                        html += '<div class="tagDetail">' + $tag.find('description').text() + '</div>';
                        html += '</div>';   
                    if($tag.attr('name') == getName){
                        container.append(html);
                    }else{
                    return false;
                    }       

                });                        
            });
            return false;
        });
    });

XMLCode: 

<?xml version="1.0" encoding="utf-8" ?>
<sections>
  <sector name="mark">
  <description>Mark Text is coming</description>
  </sector>
  <sector name="source">
  <description>Source Text is coming</description>
  </sector>

</sections>

如果你想通过点击链接的描述是根据链接的href属性显示，你的html页面脚本将是

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var container = $('#uiWrapper');
    $('a.readmore').click(function(e){
        e.preventDefault();
        var getName=$(this).attr('href')
        container.empty();
        $.get('myxml3.xml', function(xml){
            $(xml).find('sector').each(function(){
                var $sector = $(this);
                var title = $sector.attr("name");
                if(title===getName){
                    var description = $sector.find('description').text();
                    var html='<div class="data"><div class="tagDetail">'+description+'</div></<div>'
                    $('#uiWrapper').append($(html));
                };
            });
        });
   });
});
</script>
</head>
<body>
<div id="uiWrapper"></div>
<a class="readmore" href="mark">mark</a>
<a class="readmore" href="source">source</a>
</body>
</html>

在这个例子中，我使用了你的帖子的xml文件
如果您想通过使用$ajax方法获得相同的结果，您的代码将是

<script type="text/javascript">
$(document).ready(function(){
    var container = $('#uiWrapper');
    $('a.readmore').click(function(e){
        e.preventDefault();
        var getName=$(this).attr('href')
        container.empty();
        $.ajax({
            type: "GET",
            url: "myxml3.xml",
            dataType: "xml",
            success: function (xml) {
                var xmlDocument = $.parseXML(xml)
                var $xml = $(xmlDocument);
                $(xml).find('sector').each(function(){
                    var $sector = $(this);
                    var title = $sector.attr("name");
                    if(title===getName){
                        var description = $sector.find('description').text();
                        var html='<div class="data"><div class="tagDetail">'+description+'</div></<div>'
                        $('#uiWrapper').append($(html));
                    }
                })  
             }
        });
   });
});
</script>
相关文章：