我是 jquery 的新手。但我需要一些帮助。我想在 jquery 中隐藏和显示按钮。
我有 3 个按钮，但我只想在单击一个按钮时显示一个按钮而不是其他 2 个按钮隐藏。
input[type="file"] {
display: none;
}
.custom-file-upload {
background:#edeef0;
color: #2b2c31;
font-size:18px;
width:170px;
padding:12px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border:1px solid #fff;
cursor:pointer;
}
.social_button_area{
width:130px;
padding:10px;
font-size: 18px;
border:1px solid #fff;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
height:52px;
cursor:pointer;
background:#edeef0;
color: #2b2c31;
}
.social_text_area{
width: 100%;
height:120px;
border:1px solid #fff;
color: #0f366b;
resize: none;
}
#musicinfo {
display: none;
}
#audioinfo {
display: none;
} <div align="center">
<form name="fileField" action="story_action.php" method="post" enctype="multipart/form-data">
<div class="top_attach_sub top_attach_sub_mobile" align="right">
<div align="right">
<div style="float:right; padding:5px;">
<button id="Flow" name="Submit" type="submit" class="social_button_area" title=" Share Your Flow ">
<i class="fa fa-share-alt-square"></i> Flow
</button>
</div>
<div style="float:right; padding:5px;">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-picture-o"></i> Upload Photo
</label>
<input id="file-upload" type="file" name="photo"/>
</div>
<div style="float:right; padding:5px;">
<button id="audio" name="Submit" type="button" class="social_button_area" title=" Add Audio ">
<i class="fa fa-volume-up"></i> Add Audio
</button>
</div>
<div style="float:right; padding:5px;">
<button id="music" name="Submit" type="button" class="social_button_area" title=" Add Video ">
<i class="fa fa-youtube-play"></i> Add Video
</button>
</div>
</div>
</div>
</div>
</div>
<div class="small-12 columns">
<div class="top_attach_sub" align="center" style="height:130px; width:100%;">
<textarea name="dessc" class="social_text_area" placeholder="Flow your thinking"></textarea>
</div>
</div>
<div id="audioinfo" class="audio_mobile">
<div class="small-12 columns">
<div class="top_attach_sub" align="center" style="height:50px; width:100%;">
<input name="c_aud" type="text" class="social_text_area" value="" placeholder="Enter Clyp Audio Url. Example : https://clyp.it/e1bn0tsz ">
</div>
<div align="center" style="background:#FFFFFF;">
<p class="help" style="padding:5px;">
1. Login your Clyp Account . or <a href="https://clyp.it/#signup" target="_blank">Click Here</a>
</br>
2. Upload Your Audio Song using upload button .
</br>
3. Choose Your Audio FIle than Wait for upload
</br>
4. After upload fill up the basic Title and Description of this audio.
</br>
5. Than click Save.
</br>
6. Copy the url of the song . <storng>(Example : https://clyp.it/eosdmbmg)</storng> from the address bar of your browser.
</br>
7. Copy the url and paste the below text field.Thanks.
</p>
</div>
</div>
</div>
<div id="musicinfo">
<div class="small-12 columns">
<div class="top_attach_sub" align="center" style="height:50px; width:100%;">
<input name="y_vid" type="text" class="social_text_area" value="" placeholder="Enter Youtube Video Url. Example : https://www.youtube.com/watch?v=ZeIXjV0LWnA ">
</div>
<div align="center" style="background:#FFFFFF;">
<p class="help" style="padding:5px;">
1. Go to Youtube . or <a href="https://youtube.com" target="_blank">Click Here</a>
</br>
2. Open a video which you want to share our flow.
</br>
3. Copy the youtube url.
</br>
4. Paste it into the box.
</br>
5. Than Press flow.
</br>
</p>
</div>
</div>
</div>
</div>
</div>
</form>
</div> <script type="text/javascript">
$('button,input[type="file"]').click(function(e){
if(e.target.tagName=='INPUT')
$('button,input[type="file"]').not($(this)).toggle();
else{
$('button').not($(this)).toggle();
$('input[type="file"]').closest('div').toggle();
}
});
$(document).ready(function(){
$("#file-upload").on('change',function(){
//do whatever you want
alert("Photo Selected.");
});
});
$(document).ready(
function() {
$("#music").click(function() {
$("#musicinfo").fadeToggle();
});
});
$(document).ready(
function() {
$("#audio").click(function() {
$("#audioinfo").fadeToggle();
});
});
</script>
首先，显示之后的所有三个按钮，
如果点击上传照片
隐藏:添加视频和添加音频
如果点击添加视频
隐藏:上传照片和添加音频
如果点击添加音频 隐藏:上传照片和添加视频
但是流按钮永远不会隐藏，因为它是发布按钮。
感谢大家。
最佳答案
您应该结合使用 .toggle() 方法和 .not() 方法。
$('button[type="button"],input[type="file"]').click(function(e){
if(e.target.tagName=='INPUT')
$('button,input[type="file"]').not($(this)).not($('button[type="submit"]')).toggle();
else{
$('button').not($(this)).not($('button[type="submit"]')).toggle();
$('input[type="file"]').closest('div').toggle();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="center">
<div style="float:right; padding:5px;">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-picture-o"></i> Upload Photo
</label>
<input id="file-upload" type="file" name="photo"/>
</div>
<div style="float:right; padding:5px;">
<button id="audio" name="Submit" type="button" class="social_button_area" title=" Add Audio ">
<i class="fa fa-volume-up"></i> Add Audio
</button>
</div>
<div style="float:right; padding:5px;">
<button id="music" name="Submit" type="button" class="social_button_area" title=" Add Video ">
<i class="fa fa-youtube-play"></i> Add Video
</button>
</div>
<button type="submit">Submit</button>
</div>关于javascript - 使用jquery隐藏三个按钮中的两个，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42084707/