1

我正在学习 jquery，我正在尝试使用 jquery 从 xml 获取加载数据。我在列表视图中获取父标签，当我单击特定父标签时，它会获取所有父标签的所有子标签.

XML 文件：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<page count="56" name="ebook">
  <sections>
    <section count="7" name="Seduce Your Partner" order="1">
      <content file="93828.txt" order="1">Balmy with rich perfumes</content>
      <content file="93829.txt" order="2">Wear a fine dress</content>
      <content file="93830.txt" order="3">Welcome to Love Abode</content>
      <content file="93831.txt" order="4">Rekindle your love</content>
      <content file="93832.txt" order="5">Flower a love messanger</content>
      <content file="93833.txt" order="6">Perfumes and Aromas</content>
      <content file="93834.txt" order="7">Gain a women&amp;apos;s heart</content>
    </section>
    <section count="6" name="The Touch of Love" order="2">
      <content file="93835.txt" order="8">A Love Message</content>
      <content file="93836.txt" order="9">An awakening kiss</content>
      <content file="93837.txt" order="10">Heading South with Confidence</content>
      <content file="93838.txt" order="11">Caressing</content>
      <content file="93839.txt" order="12">Stroking</content>
      <content file="93840.txt" order="13">Blows &amp;amp; Cries</content>
    </section>
    <section count="8" name="Beyond Touch" order="3">
      <content file="93841.txt" order="14">Watch, Listen &amp;amp; Experiment</content>
      <content file="93842.txt" order="15">Blindfolded</content>
      <content file="93843.txt" order="16">Embrace of Jaghana</content>
      <content file="93844.txt" order="17">Piercing Embrace</content>
      <content file="93845.txt" order="18">Twining of a Creeper</content>
      <content file="93846.txt" order="19">Line of Jewels</content>
      <content file="93847.txt" order="20">Token of Remembrance</content>
      <content file="93848.txt" order="21">Oils and Lotions</content>
    </section>
  </sections>
</page>

这是我的 xml 文件。我正在获取所有带有属性“名称”的父标签，但问题是当我单击列表中的特定父标签时，它会获取所有父标签的所有子标签。

在这里看到问题：http: //jsfiddle.net/bhvxV/

任何人都可以帮助我找到只让那个父母的孩子的解决方案。

提前致谢。

谢谢奥马尔 ..这就是我正在寻找的东西，但我想知道另一件事“如何在子标签中打开文件”。例如在上面的 xml 文件中“我们为每个父母都有一个像下面这样的子标签.

<content file="93828.txt" order="1">Balmy with rich perfumes</content>
      <content file="93829.txt" order="2">Wear a fine dress</content>

当我点击子标签时，例如：Balmy with rich香水“93828.txt”文件必须打开。当我点击儿童时如何打开这个文件。

例如“93828.txt”文件：用于“勾引你的伴侣”中的“Balmy with rich seasons”

<html><head><title></title></head><body>
<div id="mobi_content"><h1>Balmy with rich perfumes</h1><div id="dataSectionInstanceId-182047" class="mobifusion_data"><p><I>The outer room, balmy with rich perfumes, should contain a bed, soft, agreeable to the sight; covered with a clean white cloth... having garlands and bunches of flowers upon it. </I><P>A well-appointed bedroom will inspire many nights (and mornings) of pleasure. Ideally, your bed should be comfortable and inviting, with enough space around it to make you feel at ease. You should be able to move energetically without producing annoying squeaks or thumps. Whether your taste runs to red velvet or white linen, strive to establish an aesthetic of pleasure, relaxation, and entertainment. Items you may want within easy reach include:<P>*Drinking water and tissues<P>*Mints or candied aniseed<P>*Lubricant and condoms<P>*Neck pillow (for under your hips)<P>*Love toys and ostrich feather<P>*Scented lotions and massage oil<P>*Incense, candles, and matches<P>Make sure your bedroom smells delicious and is softly lit, and don't forget suitable music. Consider placing a candle where it will cast your lovemaking shadows on the wall, or a mirror where you can catch a glimpse of yourselves. Add a bowl of delicious fruits, books of love poetry, even board games.<P><img src="multimedia/frontimage1.png" id="mobi_image_1694" class="inline-img"/></p></div></div></body></html>

93835.txt：《爱的触动》中的“爱的讯息”

<html><head><title></title></head><body>
<div id="mobi_content"><h1>A Love Message</h1><div id="dataSectionInstanceId-182061" class="mobifusion_data"><p><I>When a girl touches her lover's lip with her tongue, and having shut her eyes, places her hands on those of her lover, it is called the</I><b> touching kiss.</b><P>Each day offers an opportunity to receive or deliver the <b>Touching Kiss,</b> the most tender and electrifying of the genre. You can proceed from there to the three basic kisses, <b>Straight</b>, <b>Bent</b>, and <b>Turned</b>.<P><b>Straight</b> is just as it sounds, with the two of you facing each other. <b>Bent</b> is done with heads tipped to the side, and <b>Turned</b> is done when one person takes the other's chin and head in hand and turns his or her face up for a kiss. If you engage in any of these kisses with urgency, it's called the <b>Pressed Kiss</b>.<P>An intense crush can drive a lover to distraction, leading to a kiss of the beloved's reflection in a mirror or water, or shadow on a wall. When that's done it's called a <b>Kiss Showing the Intention</b>, and only those dizzy with love do it. If they give a peck to a child, picture, or figurine in the presence of their sweetheart, making it obvious for whom the kiss was truly intended, it's called a <b>Transferred Kiss.</b> This is a sneaky way to send a love message in mixed company. At a movie or a party, you can show your love discreetly by kissing your fingertips and touching them to your darling's finger or toes.<P><img src="multimedia/frontimage2.png" id="mobi_image_1695" class="inline-img"/></p></div></div></body></html>

使用更新的 Html 文件和 Js 查看此链接：http: //jsfiddle.net/Hs38x/3/

提前致谢。

4

1 回答 1

1

您需要content根据section id查找。检查下面的示例和代码。

演示

创建列表section：

var xml = 'xml code here';

$(xml).find('section').each(function () {
 var section = $(this).attr("name");
 var order = $(this).attr("order");
 $("#section_list").append('<li><a href="#chapter" id="' + order + '">' + section + '  </a> </li>');
 $("#section_list").listview('refresh');
});

基于单击的列表项，获取它id并基于以下内容提取内容id：

$("#section_list").on('click', 'a', function () {
 var order = $(this).attr('id'); // clicked item id/order
 $("#content_list").empty(); // wipe it before you add items
 $(xml).find('section[order="' + order + '"] content').each(function () {
  var content = $(this).text();
  var file = $(this).attr('file'); // added this and file="" inside <a> link below
  $("#content_list").append('<li><a href="#" file="' + file + '" id="">' + content + ' </a> </li> ');
 });
 $("#content_list").listview('refresh');
});

更新的答案

参考您的评论和更新的问题，这里是代码。但首先，您需要按如下方式添加file.txt到链接中。<a>

var file = $(this).attr('file');
$('#content_list').append('<li><a href="#" file="' + file + '">' + content + ' </a></li>');

使用file.txt名称更新链接后，以下代码将.load()内容file.txt放入新页面。

$(document).on('click', '#content_list li a', function () {
 var file = $(this).attr('file');
 if($('[data-role=page]#words').length === 0) {
  $($.mobile.pageContainer).append('<div data-role="page" id="words" data-add-back-btn="true"><div data-role="header"><h1>Words</h1></div><div data-role="content"></div></div>');
  $('[data-role=page]#words [data-role=content]').load('path/'+file);
  $.mobile.changePage('#words');
 }
 else {
  $('[data-role=page]#words [data-role=content]').empty();
  $('[data-role=page]#words [data-role=content]').load('path/'+file);
  $.mobile.changePage('#words');
 }
});

我已经给页面一个 id#words将其更改为适合您的任何内容。

如果您有任何问题，请告诉我。

于 2013-04-29T13:58:49.540 回答