0

jQueryの質問がありますが、それはばかげた質問だと思います。私はJSとjQueryの初心者です...

使っています

$("#myLink").click(function(){
    $(".myClassToShow").show();
    $(".myClassToHide").hide();
});

クラスmyClassToHideをクラス属性として持つ要素を非表示にし、クラスmyClassToShowをクラス属性として持つ要素を表示します。これは本当に理解しやすいと思います:)

良いクラスですべての要素を隠すとは思いませんでしたが、まあ、それは機能します。

ここでの私の心配は、私の要素が数秒間だけ表示および非表示になることです。つまり、マウスがリンクをクリックしたときです。

すでにリンクをクリックしたときにmyClassToShow要素を画面に残したいのですが、myClassToHide要素は実際には非表示になっています。

たとえば、ヨハン・ハマーストロムのウェブサイトで「印刷」をクリックすると、印刷されていない彼の作品はすべて非表示になり、印刷されたものだけが残ります。

それはちょっと私が欲しいものです。Firebugを使用して検索しましたが、彼が使用したイベントの種類が見つかりませんでした。私はonchangeが正しい答えではないことを知っています、それで何ですか？

私を手伝ってくれますか？

（ちなみに、よろしくお願いします）

4

3 に答える 3

3

e.preventDefault();私があなたを正しく理解していれば、あなたは行方不明だと思います。

$("#myLink").click(function(e) { // Add the event parameter.
    $(".myClassToShow").show(); // .show('fast'); for animation effect.
    $(".myClassToHide").hide(); // .hide('fast'); for animation effect.

    // Prevent the default action of the event to be triggered.
    e.preventDefault(); 

    // Or use
    return false;
});

探していた部分は次のファイルにあります：http：//johanhammarstrom.se/wp-content/themes/garnish/js/jquery.custom.js
？ver=1.0 を検索しportfolioTerms.clickます。

于 2012-11-23T23:00:59.793 に答える
0

リンク先のサイトの例を使用している場合は、次のような方法を試すことができます。

<a class="print-link">Print</a>
<a class="show-all">show me everything</a>

<img src="something.png" class="print-img samples"/>
<img src="something.png" class="print-img samples"/>
<img src="something.png" class="print-img samples"/>
<img src="something.png" class="print-img samples"/>
<img src="something.png" class="print-img samples"/>

$('.print-link').on('click', function(){
    $('.print-img').addClass('hidden');
});

$('.show-all').on('click', function(){ 
    $('.samples').removeClass('hidden');
})

.hidden { opacity: 0; visibility: hidden; -webkit-transition: 1s all; } 
//opacity 0 will keep the space in the dom otherwise use display: none; the transition will make it fade if CSS3 is supported too :)

したがって、ここでは、クリックイベントに基づいてクラスを追加または削除しているだけです。お役に立てば幸いです。

于 2012-11-23T23:02:41.023 に答える
0

私はこのサンプルを作成しました。これは、あなたが指摘したサイトの動作を模倣しているはずです。

HTML

<div class="show_controller" data-show="hidable" >All</div>
<div class="show_controller" data-show="class1" >class1</div>
<div class="show_controller" data-show="class2" >class2</div>
<div class="show_controller" data-show="class3" >class3</div>

<div class="hidable class1">class1</div>
<div class="hidable class2">class2</div>
<div class="hidable class3">class3</div>
<div class="hidable class1 class2">class1 and class2</div>
<div class="hidable class2 class3">class2 and class3</div>

CSS：

.show_controller {
 display: inline;
 color: red;
 cursor: pointer;    
}​

JS

$('.show_controller').click(function() {
    var t = $(this);
    var for_show = '.' + t.data('show');
    $('.hidable:visible').not(for_show).hide(500);
    $(for_show).show(500);

});​

サンプル

于 2012-11-23T23:10:38.743 に答える