0

私と同様の他の質問を見てきましたが、他の人のアドバイスに従いましたが、まだこれを機能させることができません。

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

私は各伝記のテキストを に表示し、click次にhide2 回目のクリックで表示しようとしています。最初のクリックは機能しますが、2 回目のクリックではテキストが非表示になりません。ライブサイトはこちらです。

CSS はdisplay:none#TyBio 用です。

誰でも助けることができますか？ありがとう！

4

3 に答える 3

2

解決

非表示/表示のみを行う場合は、toggle メソッドを使用できます。

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

API ドキュメント: http://api.jquery.com/toggle/

代替案

方法 1

次のような画像があります。

<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)
});

方法 2

またはさらに簡単に、あなたはこの種の構造を持っているようです:

<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

ここに 2 つの間違いがあります。まず、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 に答える
0

両方を 1 つのクリック ハンドラーにパックし、クラスをトグルして 2 つの状態を交互に切り替えます。これは、より多くのアクションを実行する必要がある場合に便利です

$("#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 に答える