javascript - 单击动态链接时填充 jQuery Mobile 页面内容

Question

我对 jQuery Mobile 和 AJAX 请求有点陌生。我会尽力说得清楚。

我正在开发一个移动项目，我正在使用 jQuery Mobile 自动完成列表，并使用 XML 文件填充它(因为现在使用 MySQL 数据库对我来说太复杂了)。

我已成功提取自动完成列表，其中填充了来自外部 XML 文件 (lista.xml) 的数据，代码如下:

<script>
$(function(){

$.ajax({
 type: "GET",
 url: "lista.xml",
 dataType: "xml",
 success: function(xml) {

  $(xml).find("anuro").each(function(){

  Cientifico = $(this).find("n_cientifico").text();
  Comun = $(this).find("n_comun").text();
  Foto = $(this).find("foto").text();
  Familia = $(this).find("familia").text();
  SubFamilia = $(this).find("subfamilia").text();

  $("#lista").append('<li><a href="#resultados" data-transition="slide"><img src="img/'+Foto+'"><h2>' + Cientifico + '</h2><p><b>Familia:</b> <i>'+Familia+'</i> | <b>Subfamilia:</b> <i>'+SubFamilia+'</i></p></a></li>');
  });
  $("#lista").listview("refresh");
 }
});
 });
 </script>

这是我页面内容部分的代码:

<ul id="lista" data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Buscar..." data-inset="true">
</ul>

现在效果很好。它从我的 XML 文件中加载所有数据，显示 anuro( Frog )及其家人的正确图片，等等。我的问题是: 如何找出列表中的哪个选项被单击，并填充另一个页面 <div>来自同一 XML 文件的正确数据？ 该网络应用程序的想法是，作为用户，您可以通过学名或物种科搜索 anuro( Frog )，当您单击它时，页面会显示有关该物种的更多信息。

再举一个例子，我将粘贴一个我想要完成的示例，其中填充了示例数据:

<!-- PAGINA RESULTADO -->   
    <div data-role="page" id="resultados">
        <div data-role="header" data-position="fixed">
        <h1>eFrogs</h1>
        <a data-rel="back" data-icon="back" class="ui-btn ui-icon-carat-l ui-btn-icon-notext ui-corner-all">volver</a>
    </div>

    <div role="main" class="ui-content">

        <!-- TITULO -->
        <h3><center><i>Phyllomedusa Sauvagii</i></center></h3>

        <!-- FOTO -->
        <a href="#foto" data-rel="popup" data-position-to="window" data-transition="pop">
        <img class="popphoto" style="margin-right:10px" src="img/phyllomedusa_sauvagii.jpg" alt="Phyllomedusa Sauvagii" width="100%"></a>
        <div data-role="popup" id="foto" data-overlay-theme="b" data-theme="b" data-corners="false">
        <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">
        Cerrar
        </a>
        <img class="popphoto" src="img/phyllomedusa_sauvagii.jpg" style="max-height:512px;" alt="Phyllomedusa Sauvagii">
        </div>  

    <br><br>

        <!-- GRILLA DE DATOS -->
            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <div class="ui-bar ui-bar-a" style="text-align: right;">
                    Nombre Común
                    </div>
                </div>
                <div class="ui-block-b">
                    <div class="ui-bar">
                    Rana Mono
                    </div>
                </div>
                <div class="ui-block-a">
                    <div class="ui-bar ui-bar-a" style="text-align: right;">
                    Familia
                    </div>
                </div>
                <div class="ui-block-b">
                    <div class="ui-bar">
                    Hyllidae
                    </div>
                </div>
                <div class="ui-block-a">
                    <div class="ui-bar ui-bar-a" style="text-align: right;">
                    SubFamilia
                    </div>
                </div>
                <div class="ui-block-b">
                    <div class="ui-bar">
                    Phyllomedusinae
                    </div>
                </div>
                <div class="ui-block-a">
                    <div class="ui-bar ui-bar-a" style="text-align: right;">
                    Estado de Conservación
                    </div>
                </div>
                <div class="ui-block-b">
                    <div class="ui-bar">
                    Least Concern
                    </div>
                </div>
            </div>

        <!-- DATOS EXTRA -->
        <h4 class="ui-bar ui-bar-a">Distribución Geográfica</h4>
            <div class="ui-body">
                <p>Chacoan region of eastern Bolivia, northern Paraguay, Mato Grosso do Sul (Brazil), and northern Argentina.</p>
                <p>Up to 1500 m</p>
            </div>
        <h4 class="ui-bar ui-bar-a">Hábitat y Ecología</h4>
            <div class="ui-body">
                <p>It occurs in the dry Chaco and is an arboreal species. It occurs on vegetation near temporary lagoons or ponds and the males call at night. They make a coarse leaf nest, filled with their glutinous egg-clutches which hangs over the water, the hatched tadpoles then drop in to the water below where they develop. It breeds only in the rainy season and is not tolerant of substantial habitat disturbance.</p>
            </div>

    </div><!-- /content -->

    <!-- PIE DE PAGINA -->
    <div data-role="footer" data-position="fixed">
        <h4>Webapp en Construcción</h4>
    </div>
</div>

上面的页面充满了示例数据。这个想法是，当您选择一个选项时，数据会更新为正确的选项。 我希望你能理解这一切。感谢您的帮助!

Answer 1

我不确定我是否理解了所有内容，但您可以监听列表项上的“点击”事件:

$('li').on('click', function() {
    $.mobile.changePage("#phyllomedusa_sauvagii");
});

编辑:

当您在列表中生成项目时，您可以为其指定一个 ID 以便轻松检索它:

<li id="anuro">...</li>

然后你可以添加事件监听器:

$('#anuro').on('click', function() {
    $.mobile.changePage("#phyllomedusa_sauvagii");
});

在您的情况下，代码可能如下所示:

var item = ('<li id="aruno"><img src="img/'+Foto+'"><h2>' + Cientifico + '</h2><p><b>Familia:</b> <i>'+Familia+'</i> | <b>Subfamilia:</b> <i>'+SubFamilia+'</i></p></li>');
$('#lista').append(item);

item.on('click', function() {
    $.mobile.changePage("#phyllomedusa_sauvagii");
});

$("#lista").listview("refresh");

编辑2:

一旦你开始理解jquery，一切就变得容易了。 下面我编辑了上面创建的部分代码来替换页面中的照片:

item.on('click', function() {
    $('.popphoto').attr('src', 'img/'+Foto);
});