0

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

<event>XML 内のそれぞれについて、子とこの子の値<a class="date" onclick="ShowEV()">を含むリスペクティブを追加するにはどうすればよいですか?<date><date></a>

これはhttp://campaniajazz.altervista.org/#eventsで見ることができます

4

2 に答える 2

0

イベントリスナーにはjQueryを使用する必要があります。また、イベントを変数に保存するには、クロージャーが必要になります。

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);
     };
}
于 2013-02-08T00:22:59.997 に答える
0

ソース (xml) にアクセスする方法はわかりませんが、jsFiddle を作成し、それが役立つことを願っています...

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>

ザ・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());
  }
);
});
于 2013-02-08T00:45:23.020 に答える