Question

当我点击锚标签时，我正在尝试使用id #latestgames更改div的内容。此代码位于结束正文标记

之前

<script type="text/javascript">
    $(function(){
$("a").click(function(){
   if($(this).attr("id") == "web") {
      $("#latestgames").html("<div>

            </div>")
   }
   else if($(this).attr("id") == "app") {
      $("#latestgames").html("<div>

            </div>")
   }
else if($(this).attr("id") == "uni") {
      $("#latestgames").html("<div>

            </div>")
   }
   else if($(this).attr("id") == "other") {
      $("#latestgames").html("<div>

            </div>")
       }
    });
});     
</script>

如果相关，每个div的内容将填充ul。锚标签列表如下

<li class="portfolio"><a id="web" href="javascript:void(0);">Web Development</a></li>
<li class="portfolio"><a id="app" href="javascript:void(0);">Web Development</a></li>
<li class="portfolio"><a id="uni" href="javascript:void(0);">Web Development</a></li>
<li class="portfolio"><a id="other" href="javascript:void(0);">Web Development</a></li>

在头部我打电话给以下

<script type='text/javascript' src='https://ajax.googleapis.com/ajax
/libs/jquery/1.7.2/jquery.min.js'></script>

对于我可能做错的任何见解都将不胜感激！

Answer 1

实际上，在javascript中你不能在一行上打开一个字符串并在之后关闭多行。

你应该替换

  $("#latestgames").html("<div>

    </div>")
}

与

  $("#latestgames").html("<div></div>")
}

Answer 2

问题是你的换行符导致一个未终止的语句（你应该看看控制台是否有任何错误，这会给你一些线索）：

$("#latestgames").html("<div>

    </div>")

同时简化您的代码：

$(function () {
    $("a").click(function () {
       var id = this.id; //get the id and cache it
        var html = "";
        switch (id) { //switch the value
            case "web":
                html = "somehtml";
                break;
            case "app":
                html = "somehtml";
                break;
            case "uni":
                html = "somehtml";
                break;
            case "other":
                html = "somehtml";
                break;
        }
       $("#latestgames").html(html); // set the html
    });
});

多次调用$(this).attr("id")并不好也只是使用this.id访问id，不要为此干扰jquery ...

Answer 3

我找到了一个更优雅的解决方案，并为写入div的内容提供了更大的灵活性。我希望它可能对某人有用。这就在关闭正文标记之前：

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
    $('#menu ul li a').click(function(){
    $('#web').load('portfolio.html #' + $(this).attr('href'));
    return false;
    });
    });
</script>

以下HTML进入了所需的网页：

<div>
    <nav id="menu">
    <ul class="portfolionav">
        <li class="portfolionav"><a href="web">Web Development</a></li>
    <li class="portfolionav"><a href="app">App Development</a></li>
    <li class="portfolionav"><a href="uni">University/Early Work</a></li>
    <li class="portfolionav"><a href="other">Other Stuff</a></li>
    </ul>
    </nav>
</div>

<div id="web">
    <!--Any default HTML goes in here-->
</div>

Javascript引用我创建的html文件并上传到名为portfolio.html的服务器。该文件包含以下内容：

<div id="web">
    <!--Any required HTML goes in here-->
</div>

<div id="app">
    <!--Any required HTML goes in here-->   
</div>

<div id="uni">
    <!--Any required HTML goes in here-->   
</div>

<div id="other">
    <!--Any required HTML goes in here-->   
</div>

使用Javascript更改div的内容

3 个答案: