我可以使用哪个其他事件处理程序？

Question

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

我使用

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

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

我不认为它会隐藏每一个好的类的元素，但是，好吧，它的工作原理。

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

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

例如，在johann Hammarstrom's website上，当您点击“打印”时，所有未打印的作品都被隐藏起来，只剩下打印的作品了。

这是有点我想要的。我使用Firebug进行搜索，但无法找到他使用的事件。我知道onchange并不是正确的答案，那么是什么？

请问您能帮我吗？

（顺便说一句，感谢由提前为你的时间）

Answer 1

我想你失踪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。

Answer 2

如果您使用的是您链接到您的网站的示例，可以尝试这样的方法。

<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 :) 

所以在这里，您只是添加或删除基于点击事件的类。希望有所帮助。

Answer 3

我做了这个样本，它应该模仿你所指向的网站的行为：

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

});​ 

sample