如何在jQuery中将操作绑定到链接？

Question

我在一个网站上工作，它有一个关于我们的页面上的缩略图导航，对于每个人，你点击他们的个人资料显示在同一个框内。然后，通过单击配置文件底部的“关闭”，可以返回到缩略图。

到目前为止，我有以下div...

<div class="container">

    <div class="thumbnails"></div>
    <div id="profile-1"></div>
    <div id="profile-2"></div>
    <div id="profile-3"></div>
    <div id="profile-4"></div>

<div>

在名为"people“的div中...

<ul>
    <li class="thumbnail-1"><a href="#">Profile 1</a></li>
    <li class="thumbnail-2"><a href="#">Profile 2</a></li>
    <li class="thumbnail-3"><a href="#">Profile 3</a></li>
    <li class="thumbnail-4"><a href="#">Profile 4</a></li>
</ul>

我的想法是绝对定位所有div，使它们一个接一个地放在一起，然后在加载文档时隐藏所有配置文件。

然后，当单击缩略图时，将display: block和z-index: 100绑定到相应的配置文件，强制配置文件显示在缩略图的顶部。

我的问题是，这是最好的方法吗？我需要什么jquery来生成此行为，以便删除在单击close按钮时创建的css属性？

非常感谢您的时间和帮助。

Answer 1

试试Demo

我刚刚意识到你想要的和我最初放的完全相反，但有一点:最好将你的div的id命名为锚标签的确切名称作为文本，而且为了有一个文本来点击一些必须在你的div中的东西：

<div id="container">
    <div class="thumbnails"></div>//I don't even use this, so if you don't use it for something else you can get rid of this line
    <div id="Profile-1">first one</div>
    <div id="Profile-2">second one</div>
    <div id="Profile-3">third one</div>
    <div id="Profile-4">fourth one</div>
</div>
<ul id="thumbnails">
    <li><a href="#">Profile-1</a></li>
    <li><a href="#">Profile-2</a></li>
    <li><a href="#">Profile-3</a></li>
    <li><a href="#">Profile-4</a></li>
</ul>

<script>
    $(function () {
        $('#container').hide(); //hide the links in the list
        $('#thumbnails a').click(function () {  // bind the li's click event
            var id = $(this).text();
            $("#container div").each(function () {
                if ($(this).attr("id") == id) {
                    $(this).show().parent().show();
                }
                else {
                    $(this).hide();
                }
            });
        });
    });
</script>

Answer 2

别干那事。只需根据需要显示/隐藏它们：

$("#thumbnails a").click(function() {
  var id = "profile" + this.id.substring(1);
  $("#container").children().hide();
  $("#" + id).show();
  return false;
});

假设下面这一点稍微改变了它：

<div id="container">
  <div class="thumbnails"></div>
  <div id="profile-1"></div>
  <div id="profile-2"></div>
  <div id="profile-3"></div>
  <div id="profile-4"></div>
<div>

和

<ul id="thumbnails">
  <li><a id="t-1" href="#">Profile 1</a></li>
  <li><a id="t-2" href="#">Profile 2</a></li>
  <li><a id="t-3" href="#">Profile 3</a></li>
  <li><a id="t-4" href="#">Profile 4</a></li>
</ul>

这样做的原因是您希望在其中放入尽可能少的标记HTML。如果可以假定可以从列表中的位置推断出ID，则可以通过从链接中删除ID来进一步更改这一点。这只是一种可能的改变。

在标记容器和缩略图等页面元素时，使用ID似乎是合适的。另外，ID查找比其他方法要快得多。

Answer 3

您还可以尝试以配置文件和缩略图在同一结构中的方式修改HTML。

<ul>
    <li class="person">
        <div class="thumbnail"></div>
        <div class="profile"></div>
    </li>
</ul>

您仍然可以对div.profile:s使用绝对定位，但是您的javascript会更容易(并且不需要任何字符串操作)，因为您只需要找到兄弟元素。

$('div.thumbnail').click(
    $('div.profile').removeClass('visible'); // hide any visible profiles
    $(this).siblings('div.profile').addClass('visible'); // show the adjacent profile
);

(上面的示例假设使用div.profile.visible css-class来显示配置文件。)