Question

所以我有一个HTML表格，用<td>元素动态填充。这些元素是一个链接，但我不知道如何浏览它们。

我的HTML：

<div id="catalog-page" data-role="page">
        <!-- catalog header -->
        <div data-role="header" data-id="header" id="catalog-header" data-position="fixed" class="ui-header">
            <a href="#home-page" data-role="button" data-inline="true">Back</a>
            <h1>Pokémon Catalog</h1>
        </div>
        <!-- /catalog header -->

        <div data-role="content">
            <h1>Gotta catch em all!</h1>


            <table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">

                <tr>
                    <th>Name</th>

                </tr>

            </table>

        </div>

我的JS档案：

$(document).on("pageshow", "#catalog-page", function() {
console.warn("catalog-page loaded");
$.ajax({
    url: "http://pokeapi.co/api/v2/pokemon/"
}).then(function(data) {
    console.warn("Found " + data.count + " pokemon...");
    console.warn(JSON.stringify(data.results));

    var obj = data.results;
    drawTable(obj);

    function drawTable(data) {
        for (var i = 0; i < data.length; i++) {
            drawRow(data[i], i);
        }
    }

    function drawRow(rowData, c) {
        var row = $("<tr />")
        $("#table-column-toggle").append(row);
        row.append($("<td><a href=#pokemon"+c +">" + rowData.name + "</a></td>"));
    }

});
});

结果如下：

Bulbasaur的id为pokemon0，ivysaur pokemon1等。

问题是，如果我点击Bulbasaur，我希望页面加载一个新的div。在这个div我想提供有关Bulbasaur的信息。我正在使用Jquery mobile来动态加载div。

在我的HTML代码中：

<div id="pokemon0" data-role="page">
        <div data-role="header" data-id="header" id="catalog-header" data-position="fixed" class="ui-header">
            <a href="#catalog-page" data-role="button" data-inline="true">Back</a>
            <h1>Here comes the name of the pokemon</h1>

        </div>
</div>

这样可行，但正如你所看到的，我写了id =“pokemon0”，但这不是我想要的，因为否则我必须创建811 div ..

长话短说，有没有办法将id =“pokemon0”更改为我点击的任何链接（例如id =“pokemon12”）？

Answer 1

您只需要一个具有通用ID的div

<div id="pokemon" data-role="page">

将点击处理程序添加到动态链接

$("a[href^='#pokemon']").click(function(){
  $('#pokemon h1').html($(this).text());
});

参见工作示例。顺便说一句，创建811表行需要很长时间。

如何浏览动态创建的链接？

1 个答案: