Question

我有一个脚本，我希望根据列表项的ID包含一个html文件。

我有两个列表项

<ul class="fruits">
         <li id="0">Apples</li>
         <li id="1">Pears</li>
</ul>

现在到目前为止，这是我的剧本。基本上我想检查所选列表项的id并插入一个html文件，其中包含该水果的描述。

脚本

$(document).ready(function() {
$(".fruits li").click(function() {
                if(this.id == "0") {
                    $(".fruit_copy").load("blocktext/apple.html");
                }
        });
});

我希望这个<div class="fruit_copy"> </div>填充HTML内容。但当然它没有用。

Answer 1

你可以做一些比较清洁的事情：

HTML部分：

<ul class="fruits">
         <li data-dest="blocktext/apple.html">Apples</li>
         <li data-dest="blocktext/pears.html" >Pears</li>
</ul>

JS部分：

$(document).ready(function() {
  $(".fruits li").click(function() {
     // you don't need IDs or if/else statement.
     var dest = $(this).attr('data-dest');
     $(".fruit_copy").load(dest);
   });
});

Answer 2

试试这个：

$(document).ready(function () {
$(".fruits li").click(function () {
    if ($(this).attr("id") == "0") {
        //alert("aa");
        $(".fruit_copy").load("blocktext/apple.html");
    }
    });
});

假设你的相对路径是正确的。

此外，在HTML 5中，您可以将ID用作数字，但HTML 4是严格的。

编辑 - 感谢MiniRagnarok发表评论中的链接

致谢：https://stackoverflow.com/a/79022/3739658

对于HTML 4，答案是技术性的：

ID和NAME令牌必须以字母（[A-Za-z]）开头，可能是后跟任意数量的字母，数字（[0-9]），连字符（＆＃34; - ＆＃34;），下划线（＆＃34; _＆＃34;），冒号（＆＃34;：＆＃34;）和句号（＆＃34;。＆＃34;）。

Answer 3

选项值为＆＃34; falsey＆＃34;，当您检查整数时，它们是字符串，通过添加.toString()来帮助它：

我们还附加了===，因此我们不会将字符串检查 - 字符串转换为字符串。

if ( this.id.toString() === "0" ) {
   //Code
}

最后，检查您的控制台＆amp;使用网络选项卡查看您的脚本是否成功收集了带有.html HTTP代码的200文件。

在JQuery中包含基于li标签id的html

3 个答案: