0

I have seen other questions similar to mine, but I followed the advice of others and still cannot get this to work.

$("#TyPhoto").click(function(){
    $("#TyBio").show("slow");
    $("#TyPhoto").setAttribute("id", "#newTy");
    });
$("#newTy").click(function () {
    $("#TyBio").hide(1000);
    $("#newTy").setAttribute("id", "#TyPhoto");
    });

I am trying to show each biography text on a click and then hide it on the second click. The first click works, but the second one does not hide the text. The live site is located here.

The CSS is just a display:none for #TyBio.

Can anyone help? Thanks!

4

3 回答 3

2

解决方案

如果您要做的只是隐藏/显示，则可以使用切换方法：

$("#TyPhoto").click(function(){   
    $("#TyBio").toggle("slow"); //or toggle(1000)
});

API 文档：http ://api.jquery.com/toggle/

备择方案

方法一

你有这样的图像：

<img id="DafPhoto" class="insetshadow" src="" width="352" height="272">

像这样的 div 包含这样的生物：

<div id="DafBio" style="display: none;">.</div>

因此，如果您要使用 ID，则每次点击都将是唯一的。尝试将图像标签更改为以下内容：

<img class="insetshadow" data-bio="DafBio" src="" width="352" height="272">

（为其添加了一个data-bio属性并删除了id）

然后将您的点击更改为：

$(".insetshadow").click(function(){   
    var bioId = $(this).data("bio");
    $("#" + bioId).toggle("slow"); //or toggle(1000)
});

方法二

或者更简单，你似乎有这种结构：

<ul id="navlist">
 <li>
    <img class="insetshadow" >
 </li>
 <!--extra stuff-->
 <li>
    <img class="insetshadow" >
 </li>
</ul>

<span id="descriptblock" class="outshadow">
<div class="bio" id="TyBio"></div>
   <!--extra stuff-->
<div class="bio" id="DawnBio"></div>
</span>

请注意，我已经为两者添加了额外的类。删除 ID 并保持这种方式。现在您可以使用 index 属性来匹配元素： 

 $(".insetshadow").click(function(){   
        $(".bio").hide();
        var index= $(this).index();
        $(".bio:eq(" + index + ")").toggle("slow"); //or toggle(1000)
 });

编辑

要为此添加额外的事件：

 $(".insetshadow").on("click mouseover mouseout", function(){   
        //hide the rest 
        $(".bio").hide();
        var index= $(this).index();
        $(".bio:eq(" + index + ")").toggle("slow"); //or toggle(1000)
 });
于 2013-08-03T15:26:45.617 回答
0

将两者打包在一次单击处理程序中，只需切换一个类以在两种状态之间交替。当需要执行更多操作时，这会派上用场

$("#TyPhoto").click(function(){
    var $this = $(this);
    $this.toggleClass('toggled');

    if($this.hasClass('toggled')) {
        // ACTION ON TOGGLE ON
    } else {
        // ACTION ON TOGGLE OFF
    }
});
于 2013-08-03T15:30:29.670 回答
0

我在这里看到两个错误。首先，ID 属性不包括#。所以，为了设置你应该做的“newTy”id

$("#TyPhoto").click(function(){
    $("#TyBio").show("slow");
    $("#TyPhoto").setAttribute("id", "newTy");
});

其次，我相信开头没有 newTy 元素，因此您不能向其中添加侦听器。您应该委托：

$(document).on("click","#newTy",function () {
    $("#TyBio").hide(1000);
    $("#newTy").setAttribute("id", "TyPhoto");
});

是的，我也从 TyPhoto 中删除了 #。

于 2013-08-03T15:45:54.547 回答