单击链接以在页面其他位置的单独 div 中显示数据答案

【问题标题】：Click a link to show data in a separate div elsewhere on the page单击链接以在页面其他位置的单独 div 中显示数据
【发布时间】：2013-09-15 01:22:06
【问题描述】：

我仍在尝试打开会员页面，您可以单击链接查看该会员的个人简历详细信息显示在页面下方的特定 div 中。（我不想使用框架来执行此操作。）以下是我拥有的当前版本，使用来自其他线程的建议，但是当我单击链接时没有任何反应。我仍然是这方面的新手，感谢任何帮助。我没有创建小提琴，所以你可以看到整个归因 - 我从早期版本中注意到的一个错误是我的代码中引用了比小提琴中使用的更旧的 jQuery 版本。

<!DOCTYPE HTML> 
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Can YOU get this to work?</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js">
    $(document).ready(function()) {
        $(".link").click(function(){    
            $(".hide").hide();
            var dataType = $(this).attr('data-type');
            $("#" + dataType).show();
        });
    });
    </script>
    <style type="text/css">

    #profiles {background:#FFFFCC; border-style:solid; border-color:#ffd119; padding:15px; width:600px;text-align:left;position:absolute; top:450px;left:180px;}
    .show {display:block; width:600px;}
    .hide {display:none;}
    .biopic {float:left; margin-right:15px; width:200px; height:200px; border-style:solid; border-color:#000099;clear:left;}
    .biostext {display:inline; margin-left:15px; font-family:Georgia, serif; clear:right;}
    #bioLinks {float:left; display:block; font-family:Georgia, serif;  margin-left:25px; margin-top:15px;clear:right;}
    .link {font-family:Georgia,serif; color:#0000ff; text-decoration:none;}

    #Section {font-family:Georgia, serif;float:left; display:block; width:150px; margin-right:15px; margin-top:15px; text-align:right;}
    </style>

    </head>
    <body>
    <div id="Section">
    Honcho<br>Grand Poo-Bah<br>Dogsbody
    </div>
    <div id="bioLinks">
      <div><a href="#" data-type="bio1" class="link">Joe Bloggs</a></div>
      <div><a href="#" data-type="bio2" class="link">Monica Faux</a></div>
      <div><a href="#" data-type="bio3" class="link">John Doe</a></div>
      </div>
    <div id="profiles">
        <div id="bio1" class="hide">
            <div class="biopic"><img src="http://www.northshorebrass.org.nz/images/members_photos/JBloggs.jpg" width="200" height="200" alt="Joe Bloggs"></div>
            <div class="biostext">Joe Bloggs is swell.</div>
            </div>
            <div id="bio2" class="hide">
                    <div class="biopic"><img src="http://www.northshorebrass.org.nz/images/members_photos/MFaux.jpg" width="200" height="200" alt="Monica Faux"></div>
            <div class="biostext">Monica Faux is considering some changes in her life.</div>
        </div>
        <div id="bio3" class="hide">
            <div class="biopic"><img src="http://www.northshorebrass.org.nz/images/members_photos/JDoe.jpg" width="200" height="200" alt="John Doe"></div>
            <div class="biostext">John Doe is an unknown.</div>
        </div>
    </div>
    </body>
    </html>

【问题讨论】：

多个元素具有相同的 id 属性（即 #bio1 是锚点和 div 的 id）。每个元素的 ID 应该是唯一的。
谢谢，但还是不行。在检查小提琴（以及社区上一次尝试解决此问题的小提琴）时，我注意到这些小提琴在 HTML5 中运行，并且我的文档被指定为 HTML 4.01 过渡。所以我按照 Briggs & @scotsninja 修改了代码并调整了上面的 DOCTYPE。鼓声……还没有。 头敲桌子的声音有没有人有更多的想法？
W3.ord 验证给了我一个错误，因此“第 14 行，第 13 列：元素脚本的文本内容不是所需的格式：预期的空格、制表符、换行符或斜杠，但找到了 $ 。” Line & Column 引用是脚本的结束。

标签： jquery html click show-hide

【解决方案1】：

$.data() 不是从 HTML 节点检索属性的正确方法。你会想要使用$.attr() method

$(this).attr('data-type');

将返回链接上设置的数据类型属性的值。

【讨论】：

为什么 data() 不是正确的方法？链接使用 HTML5 数据属性。 jQuery api 表示使用 data() api.jquery.com/data 检索数据属性。
对不起，你是对的；但是对于simple retrieval，attr() 比 data() 快。 data() 方法也将返回属性，但也会对auto-casting values 执行额外的检查。简而言之，attr() 用于简单数据类型的 get 操作更快，但data() 用于 set 操作更安全。
我已根据 Briggs 的建议和建议修改了我的代码，并被告知您的代码是 HTML5，我的文档类型是 HTML 4.01 过渡。所以我修复了 DOCTYPE 和代码，但它仍然无法在小提琴之外工作。小提琴中属性的进一步范围对这个新手没有帮助 - 小提琴还有哪些其他假设是我的代码没有的？

【解决方案2】：

删除或重命名重复的 ID 标签（bio1、bio2、bio3）。

  <div><a href="#" data-type="bio1" class="link">Joe Bloggs</a></div>
  <div><a href="#" data-type="bio2" class="link">Monica Faux</a></div>
  <div><a href="#" data-type="bio3" class="link">John Doe</a></div>

使用 scotsninja 的回答：

$(document).ready(function() {
    $(".link").click(function() {    
        $(".hide").hide();
        var dataType = $(this).attr('data-type');
        $("#" + dataType).show();
    });
});

小提琴：http://jsfiddle.net/V6MTD/

【讨论】：

我看到这在小提琴中有效，但这段代码在 html 页面上不起作用。我也按照您的示例删除了 id= 位。