jqueryを使用して3つのうち2つのボタンを隠す

Question

jqueryの新機能です。しかし、私はいくつかの助けが必要です。 jqueryのボタンを隠して表示したい

私は3つのボタンを持っていますが、他のボタンをクリックすると1つのボタンを表示したいだけです。 Firtly

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> 

、写真をアップロード

隠す]をクリックした場合

1. 、その後すべての3つのボタンを表示：ビデオを追加し、オーディオ

を追加します

2. もしビデオを追加]をクリックします

   隠す：写真をアップロードし、追加オーディオ

3. オーディオ 隠すの追加]をクリックした場合：写真をアップロードして投稿動画

をしかし、フローボタンは、そのをするので隠すことはありませんポストボタン。

ありがとうございます。

Answer 1

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

Answer 2

これは働いていた場合は私に知らせてください：

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

Answer 3

が、これはあなたが望んでいると思います。

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