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

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

3 个答案: