jQuery 使用 if else 隐藏和显示按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14020420/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery hide and show button using if else
提问by John
I have a series of tabs in my page, I want to hide the button first off, then when you click on a certain tab within the page - then show the button. This bit I have working!
我的页面中有一系列选项卡，我想先隐藏按钮，然后当您单击页面中的某个选项卡时 - 然后显示该按钮。这一点我有工作！
My problem is - When I click on another tab, I want the to set the button to hide()again. Im new to jQueryand Im thinking I need to add an if elsestatement to do this?
我的问题是 - 当我单击另一个选项卡时，我希望hide()再次将按钮设置为。我是新手jQuery，我想我需要添加一条if else语句来做到这一点？
Code below:
代码如下：
$(document).ready(function () {
$('.myButton').hide();
$('a.tab1').click(function() {
$('.myButton').show();
return false;
});
$('.myButton').hide(); // hide again once clicked off the tab.
});
回答by anmarti
This code only works when you clic the tab thas has the class tab1. Check that all tabs within your page has this class, if not so, assing this class to alltabs in your page.
此代码仅在您单击具有 class 的选项卡时才有效tab1。检查页面中的所有选项卡是否都有此类，如果没有，则将此类分配给页面中的所有选项卡。
Moreover the function toggle()acts as ifelsein this case. So if the button is visible togglewill make it hidden, else will make it visible:
此外，该功能在这种情况下toggle()起作用ifelse。因此，如果按钮可见toggle将使其隐藏，否则将使其可见：
<a class="tab1">tab1</a>
<a class="tab1">tab2</a>
$(document).ready(function(){
$('.myButton').hide();
$('.tab1').click(function() {
$('.myButton').toggle();
});
});
回答by Manish Mishra
so am assuming you want following with your button.
所以我假设你想跟随你的按钮。
- Should not appear, when page loads
- Should appear only when a certain tab, say tab1 is clicked.
- Should disappear when anyother tab (other than tab1) is clicked.
- 页面加载时不应出现
- 应该只出现在某个选项卡上，比如 tab1 被点击。
- 单击任何其他选项卡（tab1 除外）时应消失。
then make it simple, change your code to be simple. do this:
然后让它变得简单，将您的代码更改为简单。做这个：
<script>
$(document).ready(function(){
$('.button').hide(0); //or do it through css
$('a.tab1').click(function(){
$('.button').show();
});
//otherTab is the class for the tabs other than tab1
$('a.otherTab').click(function(){
$('.button').hide();
});
});
</script>
this is a super simple script to achieve what you want. It can be more generic and short. But then you should get the idea right? you should be able to select click events of your respective tabs, that's all you need to sort out.
这是一个超级简单的脚本来实现你想要的。它可以更通用和更短。但是你应该明白这个想法了吗？您应该能够选择各自选项卡的点击事件，这就是您需要整理的全部内容。
Assign Id or Class or whatever to distinctly grab your tabs.
分配 Id 或 Class 或其他任何内容以明确抓住您的标签。
回答by waycell
add click event to the parent of all "tab" links element.
将点击事件添加到所有“标签”链接元素的父元素。
$('.parentofTabLinks').click(function(event) {
if($(event.target).is('a.tab1'))
$('.myButton').show();
else
$('.myButton').hide();
});
回答by r043v
keep jquery dom search and don't miss to not keep html link follow
保持 jquery dom 搜索，不要错过不保持 html 链接跟随
var mybutton = $("#mybutton");
$('a.tab_who_show').click(function(event)
{
mybutton.show();
event.preventDefault();
});
$('a.tab_who_hide').click(function(event)
{
mybutton.hide();
event.preventDefault();
});
you can also use jquery.on to work on a container
您还可以使用 jquery.on 在容器上工作
var mybutton = $("#mybutton");
$('#tabs_container').on("click","a.tab_who_hide",function(e){
mybutton.hide();
e.preventDefault();
}).on("click","a.tab_who_show",function(e){
mybutton.show();
e.preventDefault();
});
and test class presence to write a more global code
并测试类的存在以编写更全局的代码
var mybutton = $("#mybutton");
$('#tabs_container').on("click","a",function(e){
var needToShow = $(this).hasClass('tab_who_show');
mybutton.toggle(needToShow);
e.preventDefault();
});
回答by Rejneesh Raghunath
$(document).ready(function(){
$("button").click(function(){
// show hide paragraph on button click
$("p").toggle("slow", function(){
// check paragraph once toggle effect is completed
if($("p").is(":visible")){
alert("The paragraph is visible.");
} else{
alert("The paragraph is hidden.");
}
});
});
});
回答by Max
See .toggle()of jQuery.
Has the same of the if statement but managed by jQuery library.
请参阅.toggle()jQuery。与 if 语句相同，但由 jQuery 库管理。
回答by itsme
$(function(){
$('div').hide(0);
$('button').on('click',function(){
$('div').toggle(200);
});
});
then if you can/would use a fade effect for hiding and showing your element on click you can choose somenthing like ( pretty animation):
那么如果你可以/将使用淡入淡出效果来隐藏和显示你的点击元素，你可以选择类似（漂亮的动画）：
$(function(){
$('div').hide(0);
$('button').on('click',function(){
$('div').fadeToggle(200);
});
});
