0

我有一个 jQuery 问题，我真的认为这是一个愚蠢的问题：我是 JS 和 jQuery 的初学者......

我在用着

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

隐藏类 myClassToHide 作为类属性的元素，并显示类 myClassToShow 作为类属性的元素。我认为这真的很容易理解:)

我不认为它会用好的类隐藏所有元素，但是，它确实有效。

我担心的是我的元素只显示和隐藏几秒钟：我的鼠标点击链接的时间。

当我已经点击了我的链接时，我想让 myClassToShow 元素保留在屏幕上，并且 myClassToHide 元素真的隐藏了。

例如，在johann Hammarstrom 的网站上，当您点击“打印”时，他所有未打印的作品都消失了，只剩下打印的。

这就是我想要的。我使用 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

我制作了这个示例，它应该模仿您指出的网站行为：

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 回答
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 回答