用jquery隱藏三個按鈕中的兩個按鈕

我是jquery的新手。但我需要一些幫助。我想隱藏並顯示jquery中的按鈕。用jquery隱藏三個按鈕中的兩個按鈕

我有3個按鈕，但我想只顯示一個按鈕，當我點擊一個比其他2個按鈕隱藏。

input[type="file"] { 
 
\t \t display: none; 
 
\t } 
 
\t 
 
\t .custom-file-upload { 
 
\t background:#edeef0; 
 
\t color: #2b2c31; 
 
\t font-size:18px; 
 
\t width:170px; 
 
\t padding:12px; 
 
\t \t 
 
\t -webkit-border-top-left-radius: 10px; 
 
\t -webkit-border-top-right-radius: 10px; 
 
\t -moz-border-radius-topleft: 10px; 
 
\t -moz-border-radius-topright: 10px; 
 
\t border-top-left-radius: 10px; 
 
\t border-top-right-radius: 10px; 
 
\t 
 
\t border:1px solid #fff; 
 
\t cursor:pointer; 
 
\t } 
 
\t 
 
\t .social_button_area{ 
 
\t 
 
\t width:130px; 
 
\t padding:10px; 
 
\t font-size: 18px; 
 
\t border:1px solid #fff; 
 
\t 
 
\t -webkit-border-top-left-radius: 10px; 
 
\t -webkit-border-top-right-radius: 10px; 
 
\t -moz-border-radius-topleft: 10px; 
 
\t -moz-border-radius-topright: 10px; 
 
\t border-top-left-radius: 10px; 
 
\t border-top-right-radius: 10px; 
 
\t 
 
\t height:52px; 
 
\t cursor:pointer; 
 
\t background:#edeef0; 
 
\t color: #2b2c31; 
 
\t 
 
\t } 
 
\t 
 
\t 
 
\t .social_text_area{ 
 
\t width: 100%; 
 
\t height:120px; 
 
\t border:1px solid #fff; 
 
\t color: #0f366b; 
 
\t resize: none; 
 
\t } 
 
\t 
 
\t #musicinfo { 
 
\t \t display: none; 
 
\t } 
 
\t 
 
\t #audioinfo { 
 
\t \t display: none; 
 
\t }

<div align="center"> 
 

 
    <form name="fileField" action="story_action.php" method="post" enctype="multipart/form-data"> 
 
\t \t \t \t 
 
\t \t \t \t <div class="top_attach_sub top_attach_sub_mobile" align="right"> 
 
\t \t \t \t \t <div align="right"> 
 

 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t \t <div style="float:right; padding:5px;"> 
 
\t \t \t \t \t \t \t <button id="Flow" name="Submit" type="submit" class="social_button_area" title=" Share Your Flow "> 
 
\t \t \t \t \t \t \t <i class="fa fa-share-alt-square"></i> Flow 
 
\t \t \t \t \t \t \t </button> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t \t <div style="float:right; padding:5px;"> 
 

 
\t \t \t \t \t \t \t <label for="file-upload" class="custom-file-upload"> 
 
\t \t \t \t \t \t \t <i class="fa fa-picture-o"></i> Upload Photo 
 
\t \t \t \t \t \t \t </label> 
 
\t \t \t \t \t \t \t <input id="file-upload" type="file" name="photo"/> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t <div style="float:right; padding:5px;"> 
 
\t \t \t \t \t \t \t <button id="audio" name="Submit" type="button" class="social_button_area" title=" Add Audio "> 
 
\t \t \t \t \t \t \t <i class="fa fa-volume-up"></i> Add Audio 
 
\t \t \t \t \t \t \t </button> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t <div style="float:right; padding:5px;"> 
 
\t \t \t \t \t \t \t <button id="music" name="Submit" type="button" class="social_button_area" title=" Add Video "> 
 
\t \t \t \t \t \t \t <i class="fa fa-youtube-play"></i> Add Video 
 
\t \t \t \t \t \t \t </button> 
 
\t \t \t \t \t \t \t </div> 
 

 

 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t </div> 
 

 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t \t <div class="small-12 columns"> \t 
 
\t \t \t \t \t 
 
\t \t \t \t \t \t <div class="top_attach_sub" align="center" style="height:130px; width:100%;"> 
 
\t \t \t \t \t \t \t <textarea name="dessc" class="social_text_area" placeholder="Flow your thinking"></textarea> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t 
 
\t \t \t \t \t 
 
\t \t \t \t \t 
 
\t \t \t \t \t <div id="audioinfo" class="audio_mobile"> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <div class="small-12 columns"> \t 
 
\t \t \t \t \t 
 
\t \t \t \t \t \t <div class="top_attach_sub" align="center" style="height:50px; width:100%;"> 
 
\t \t \t \t \t \t \t <input name="c_aud" type="text" class="social_text_area" value="" placeholder="Enter Clyp Audio Url. Example : https://clyp.it/e1bn0tsz "> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t <div align="center" style="background:#FFFFFF;"> 
 
\t \t \t \t \t \t \t <p class="help" style="padding:5px;"> 
 
\t \t \t \t \t \t \t 1. Login your Clyp Account . or <a href="https://clyp.it/#signup" target="_blank">Click Here</a> 
 
\t \t \t \t \t \t \t </br> 
 
\t \t \t \t \t \t \t 2. Upload Your Audio Song using upload button . 
 
\t \t \t \t \t \t \t </br> 
 
\t \t \t \t \t \t \t 3. Choose Your Audio FIle than Wait for upload 
 
\t \t \t \t \t \t \t </br> 
 
\t \t \t \t \t \t \t 4. After upload fill up the basic Title and Description of this audio. 
 
\t \t \t \t \t \t \t </br> 
 
\t \t \t \t \t \t \t 5. Than click Save. 
 
\t \t \t \t \t \t \t </br> 
 
\t \t \t \t \t \t \t 6. Copy the url of the song . <storng>(Example : https://clyp.it/eosdmbmg)</storng> from the address bar of your browser. 
 
\t \t \t \t \t \t \t </br> 
 
\t \t \t \t \t \t \t 7. Copy the url and paste the below text field.Thanks. 
 
\t \t \t \t \t \t \t </p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t 
 
\t \t \t \t \t 
 
\t \t \t \t \t <div id="musicinfo"> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <div class="small-12 columns"> \t 
 
\t \t \t \t \t 
 
\t \t \t \t \t \t <div class="top_attach_sub" align="center" style="height:50px; width:100%;"> 
 
\t \t \t \t \t \t \t <input name="y_vid" type="text" class="social_text_area" value="" placeholder="Enter Youtube Video Url. Example : https://www.youtube.com/watch?v=ZeIXjV0LWnA "> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t <div align="center" style="background:#FFFFFF;"> 
 
\t \t \t \t \t \t \t <p class="help" style="padding:5px;"> 
 
\t \t \t \t \t \t \t 1. Go to Youtube . or <a href="https://youtube.com" target="_blank">Click Here</a> 
 
\t \t \t \t \t \t \t </br> 
 
\t \t \t \t \t \t \t 2. Open a video which you want to share our flow. 
 
\t \t \t \t \t \t \t </br> 
 
\t \t \t \t \t \t \t 3. Copy the youtube url. 
 
\t \t \t \t \t \t \t </br> 
 
\t \t \t \t \t \t \t 4. Paste it into the box. 
 
\t \t \t \t \t \t \t </br> 
 
\t \t \t \t \t \t \t 5. Than Press flow. 
 
\t \t \t \t \t \t \t </br> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t </p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t </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>

Firtly，顯示所有之後，這三個按鈕，

如果點擊上傳照片

隱藏：添加視頻和音頻
如果點擊添加視頻

隱藏：上傳照片和添加音頻
如果單擊添加音頻隱藏：上傳照片和添加視頻

但流動按鈕不會躲起來，因爲它的發佈按鈕。

感謝所有。

來源

2017-02-07 Saiful Islam Sagor

我看到兩個按鈕.. – scaisEdge

@scaisEdge也許OP指文件輸入的按鈕 – elementzero23

您應該使用.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>

來源

2017-02-07 08:13:29

也許使用'$（ '按鈕，輸入'）'會更好.... – NewToJS

@SaifulIslamSagor用我的建議'$（'button，input'）替換選擇器''唯一的問題是''**例如：** https://jsfiddle.net/u04jcegr/除非你給那些元素的類名...然後你可以只在目標選擇器中的類名。 – NewToJS

Firtly，顯示所有之後，這三個按鈕，如果點擊上傳照片隱藏：添加視頻和音頻如果點擊添加視頻隱藏：上傳照片和添加音頻如果單擊添加音頻隱藏：上傳照片和添加視頻 –

請讓我知道如果這個工作：

$(document).ready(function() { 
 
    $("#active").hide(); 
 

 
    $(".custom-file-upload").click(function() { 
 
    $("#audio").hide(); 
 
    $("#music").hide(); 
 
    $("#active").show(); 
 
    }); 
 
    $("#audio").click(function() { 
 
    $(".custom-file-upload").hide(); 
 
    $("#music").hide(); 
 
    $("#active").show(); 
 
    }); 
 
    $("#music").click(function() { 
 
    $("#audio").hide(); 
 
    $(".custom-file-upload").hide(); 
 
    $("#active").show(); 
 
    }); 
 
    $("#active").click(function() { 
 
    $("#audio").show(); 
 
    $(".custom-file-upload").show(); 
 
    $("#music").show(); 
 
    $("#active").hide(); 
 
    }); 
 
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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> 
 
</div> 
 
    <div style="float: right; padding: 5px;"> 
 
    <button id="active" name="Submit" type="button" class="social_button_area" title=" Show All Buttons!!! "> 
 
     <i class="fa fa-youtube-play"></i>Active 
 
    </button> 
 
    </div> 
 
</div>

來源

2017-02-07 08:15:14

請檢查修改後的代碼吧！ :) –

是它很好看，但我需要一些更多我想要當點擊活動按鈕比再次所有三個按鈕顯示 –

希望這是你想要的。

$(document).ready(function() 
 
{ 
 
    $('.social_button_area, .custom-file-upload').click(function() 
 
    { 
 
    $('.social_button_area, .custom-file-upload').not(this).hide(); 
 
    }) 
 
});

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; 
 

 
}

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

 
</div>

來源

2017-02-07 08:28:45

用jquery隱藏三個按鈕中的兩個按鈕

回答

相關問題