Question

如果我将xml更改为：

<?xml version="1.0" encoding="ISO-8859-1"?>
<events>
<event>
    <date>
        <weekday>ven</weekday>
        <day>15</day>
        <month>feb</month>
    </date>
    <place>
        <name>Blue Sound</name>
        <city>Nola</city>
        <address>Corso Italia 7</address>
    </place>
    <band>
        <name>Random Jazz 6some</name>
        <link>http://randomjazz6.ran</link>
        <members>
            <drummer> Random Drummer </drummer>
            <vocal> Random Vocalist </vocal>
            <bass>Random Bassist</bass>
            <guitar>Random Guitar</guitar>
            <keys>Random keyboarder</keys>
            <other>Random otherist</other>
        </members>
    </band>
    <description>this is the event number 1, ven 15 feb</description>
</event>
<event>
    <date>
        <weekday>ven</weekday>
        <day>1</day>
        <month>mar</month>
    </date>
    <place>
        <name>Dada</name>
        <city>Chicago</city>
        <address>Random Street 7</address>
    </place>
    <band>
        <name>Random Jazz band 2</name>
        <link>http://randomjazzband2.ran</link>
        <members>
            <drummer> Random Drummer </drummer>
            <vocal> Random Vocalist </vocal>
            <bass>Random Bassist</bass>
            <guitar>Random Guitar</guitar>
            <keys>Random keyboarder</keys>
            <other>Random otherist</other>
        </members>
    </band>
    <description>this is the event number 2, ven 1 mar</description>
</event>
</events>

以及以下javascript：

$(document).ready(function () {
    var day = xmlDoc.getElementsByTagName("day")[0].childNodes[0].nodeValue;
    var weekday = xmlDoc.getElementsByTagName("weekday")[0].childNodes[0].nodeValue;
    var month = xmlDoc.getElementsByTagName("month")[0].childNodes[0].nodeValue;
    var sideVoice = '<a class="date" onclick="showEv()">' + weekday + day + month + '</a>';
    document.getElementById("side_dates").innerHTML = sideVoice;
});

function showEv() {
    document.getElementById("event_content").innerHTML = xmlDoc.getElementsByTagName("description")[0].childNodes[0].nodeValue;
}

如何为XML中的每个<event>添加一个包含子<a class="date" onclick="ShowEV()">和<date>子项值<date>的{{1}}内容？{ / p>

您可以在http://campaniajazz.altervista.org/#events

上看到这一点

Answer 1

您应该将jQuery用于事件侦听器。此外，您需要closure来保存变量中的事件。

var sideDates = $("#side_dates");
var events = xmlDoc.getElementsByTagName("event");
for (var i=0; i<events.length; i++) {
    var event = events[i];

    // you might use something better to get these variables:
    var day = event.getElementsByTagName("day")[0].childNodes[0].nodeValue,
        weekday = event.getElementsByTagName("weekday")[0].childNodes[0].nodeValue,
        month = event.getElementsByTagName("month")[0].childNodes[0].nodeValue,
        description = event.getElementsByTagName("description")[0].childNodes[0].nodeValue;

    var sideVoice = $('<a class="date">' + weekday + day + month + '</a>');
    sideVoice.on("click", makeShowFunction(description));
    sideDates.append(sideVoice);
}
function makeShowFunction(texttoshow) {
     // this closure preserves the variable "texttoshow";
     return function eventHandler(e) {
         $("#event_content").text(texttoshow);
     };
}

Answer 2

我不知道，你如何访问源代码（xml），但我做了一个jsFiddle＆amp;希望它有帮助...

http://jsfiddle.net/Nrzh8/

“HTML”

<?xml version="1.0" encoding="ISO-8859-1"?>

<hr/>Your source:<hr/>

<events>
<event>
<date>
    <weekday>ven</weekday>
    <day>15</day>
    <month>feb</month>
</date>
<place>
    <name>Blue Sound</name>
    <city>Nola</city>
    <address>Corso Italia 7</address>
</place>
<band>
    <name>Random Jazz 6some</name>
    <link>http://randomjazz6.ran</link>
    <members>
        <drummer> Random Drummer </drummer>
        <vocal> Random Vocalist </vocal>
        <bass>Random Bassist</bass>
        <guitar>Random Guitar</guitar>
        <keys>Random keyboarder</keys>
        <other>Random otherist</other>
    </members>
</band>
<description>event description here</description>
</event>    
</events>

<hr/>The result (click it!):<hr/>

<div id="side_dates"></div>
<div id="event_content"></div>

THE JS

$(document).ready(function () {

var xmlsrc = jQuery('event');

whole_date = xmlsrc.find('weekday').html() + ' '
           + xmlsrc.find('day').html() + ' '
           + xmlsrc.find('month').html();

var sideVoice = '<a class="date">' + whole_date + '</a>';

jQuery("#side_dates").html(sideVoice).on('click',   
  function() { jQuery('#event_content').html(xmlsrc.find('description').html());
  }
);
});

从xml节点检索所有子节点的值，然后将javascript函数应用于每个子节点

2 个答案: