2

下午好，我完全不知道为什么会这样。我在网上搜索并试图了解我做错了 5 个多小时，但找不到解决方案。这是情况。

我有 3 个页面（index.html、index.js 和 stuff.html） index.html 是主页面并使用 jQuery 将 HTML 页面加载到 div 中。

<html>
<head>
  <script type="text/javascript" src="index.js"></script>
</head>
<body>
  <div id="stuffHolder"></div>
  <script type="text.javascript">
    $(document).ready(function(){
      $('#stuffHolder').load('stuff.html');
    });
  </script>
</body>
</html>

stuff.html 页面对我来说加载得很好。

在 stuff.html 中，我有 2 个 div 1。其中一个 DIV 使用精灵作为锚标记来调用名为 actOnStuff(options) 的函数。 

<div id="myStuff"><a class="myStuffSprite" href="Javascript:actOnStuff('newStuff')"><span>New Stuff</span></a></div>
<div id="yourStuff"><a class="yourStuffSprite" href="Javascript:actOnStuff('oldStuff')"><span>Old Stuff</span></a></div>
  1. 另一个 DIV 是空的，但稍后会写入 innerHTML。

在位于 index.html 页面上的 index.js 内部，我有一个函数

function actOnStuff(youSelected){
  strHTML = "";
  switch(youSelected){
    case "newStuff":
      strHTML += "<div id='newDIV'><span>You selected New</span></div>";
      break;
    case "oldStuff":
      strHTML += "<div id='oldDIV'><span>You selected Old</span></div>";
      break;
  }
  $('#placement').html(strHTML);
  alert($('#placement').html());
}

我的问题是，当我提醒放置 DIV 的 innerHTML 时，它显示了警报中添加的函数中必要的 DIV。但是，展示位置 DIV 中根本没有显示任何内容。

你能提供的任何帮助都会很棒，因为我完全不知道问题出在哪里。提前致谢。

4

3 回答 3

3

我不确定我是否可以帮助解决实际问题，但是为了社区的更大利益，我想指出您的代码中存在许多问题和不良做法。

这是我对您的代码的看法：

正文中的 HTML

<div id="stuff-holder"></div>

stuff.html 中的 HTML

<div id="my-stuff">
    <a class="my-stuff-sprite" href="#"><span>New Stuff</span></a>
</div>
<div id="your-stuff">
    <a class="your-stuff-sprite" href="#"><span>Old Stuff</span></a>
</div>

不好的做法：CSS 和 HTML 在大多数情况下都不区分大小写，因此当使用驼峰式命名 ID 时，例如fooBar，可能会与foobaror混淆Foobar。相反，仅使用小写字母和破折号作为分隔符（如 CSS 中）。

index.js 中的 JavaScript

我将您的ready功能移至index.js. 当您已经有一个单独的 JavaScript 文件时，我看不出为什么您希望在 HTML 文档中使用它。

// Shorthand for ready
$(function(){

    // Cache the selector
    var $placement = $("#placement");

    // Put function in the local scope so we don't clutter the global scope
    function actOnStuff(youSelected) {
        // Not declaring variables with var, makes it global (bad idea!)
        var html = "";

        switch (youSelected) {
            case "my-stuff":
                html += '<div id="new-div"><span>You selected New</span></div>';
            break;

            case "your-stuff":
                html += '<div id="old-div"><span>You selected Old</span></div>';
            break;
        }

        // Put new html in placement element
        $placement.html(html);

        // Use console.log to debug your code instead of alert
        console.log($placement.html());
    }

    // Load stuff into stuff holder and bind event handler to load event
    $("#stuff-holder")
        .load("stuff.html")
        .on("load", function() {
            // After it has loaded, bind click events
            $("#my-stuff .my-stuff-sprite, #your-stuff .your-stuff-sprite").click(function(e) {
                // Prevent default click behavior
                e.preventDefault();
                // Get id of parent
                var id = $(this).parent()[0].id;
                // Execute function
                actOnStuff(id);
            });
        });
});

href不好的做法：在当今环境中执行 JavaScript是一个很大的禁忌。即使使用onclick属性等已经过时了。

提示：将函数直接传递给 jQuery 是$(document).ready

提示：使用console.log()而不是alert()输出从对象到字符串的所有内容到您的日志（可能会给您在旧版 IE 中的错误）

我仍然不知道你的placement元素在哪里。也许这就是你的罪魁祸首？如果您对上述内容或其他任何问题有任何疑问，请随时提问。

另外，请查看jQuery Fundamentals，这是一个很好的资源，适用于所有使用 jQuery 的人，从初学者到专业人士。

编辑：检查这个jsFiddle以获得上述演示。

于 2012-09-12T23:17:05.300 回答
1

前

<script type="text/javascript" src="index.js"></script>

你应该先加载jquery库

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="index.js"></script>
于 2012-09-12T22:20:20.233 回答
0

  • 确保您只有一个 id="placement" 的元素，如果您有多个，IE 将失败。

  • 另外alert(strHTML);putted的输出是什么$('#placement').html(strHTML);，它输出字符串对吗？

于 2012-09-12T22:30:01.777 回答