ボタンを押すとデータ表示、再度押すと非表示

2023/11/01 16:29

このQ&Aのポイント

ボタンを押すとデータ表示、再度押すと非表示する方法を学びましょう。
jqueryを使用してボタンのクリックイベントを制御し、データの表示と非表示を切り替える方法を解説します。
奇数回のクリックでデータを表示し、偶数回のクリックでデータを非表示にする方法をご紹介します。

ベストアンサー

ボタンを押すとデータ表示、再度押すと非表示

2014/07/12 13:07

ボタンを押すとデータが表示されるjqueryを利用したjavascriptがあります。このボタンを再度クリックすると非表示にしたいと考えています。奇数回クリック=表示偶数回クリック=非表示という形です。ご教授いただきたくお願いいたします。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#data").show(); }); </script> <button class="button18" id="btn0">ボタン</button> <div id="data" style="display:none"> データ </div>

tajix14
お礼率72% (175/242)

JavaScript
回答数1
ありがとう数2

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

t_ohta
ベストアンサー率38% (5076/13261)

2014/07/12 13:15 回答No.1

.show() ではなく .toggle() を使用する。

質問者

お礼 2014/07/12 13:35

ありがとうございますできました!! 大変助かりました!!

関連するQ&A

2度押し防止のJavascript
先日、「買い」のボタンを押すと、100購入～800購入までがずらりと出てくるJavascriptをこちらでお教えいただきました。(ONEONE様　有難うございます) その際、「買いのボタン」の2度押し防止スクリプトも同時に組んでいただきました。それが末尾のスクリプトになります。質問買いボタンの2度押し防止は出来ていますが、100購入　200購入　300購入の連続買いができてしまう状況です。この連続買いの防止のjavascriptをご教示いただければと思います。当方は、 <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#kai").show(); $(this).prop("disabled", true); }); $("#b_btn").click(function (e) { $(this).prop("disabled", true); }); }); </script> としてみたのですが、うまく行きませんでした。よろしくお願いいたします。 *************************************************************************** 現状 (買いボタンの2度押し防止は機能しているが　　　　100購入　200購入の連続買いができる状態) *************************************************************************** <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <form action="abc.cgi" method="post" name="form1" id="form1"> <button id="btn0">買い</button> <div id="kai" style="display:none"> <button id="b_btn" type="submit" name="b100" value="100">100購入</button><br> <button id="b_btn" type="submit" name="b200" value="200">200購入</button><br> <button id="b_btn" type="submit" name="b300" value="300">300購入</button><br> <button id="b_btn" type="submit" name="b400" value="400">400購入</button><br> <button id="b_btn" type="submit" name="b500" value="500">500購入</button><br> <button id="b_btn" type="submit" name="b600" value="600">600購入</button><br> <button id="b_btn" type="submit" name="b700" value="700">700購入</button><br> <button id="b_btn" type="submit" name="b800" value="800">800購入</button><br> </div> </form> <BR> <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#kai").show(); $(this).prop("disabled", true); }); }); </script> ***********************************************************************
- ベストアンサー
- JavaScript
AJAXで新規表示されたボタンが稼働しない
下記のようなものを作りました。 1 通常は下記のような　<100購入>というボタンが表示されています。 <button class="button8" type="submit" name="volume" value="100">100購入</button> 2 <追加表示ボタン>を押すと、 <button class="button8" type="submit" name="volume" value="500">500購入</button>という<500購入>ボタンが新たに追加されます。 3 <100購入>ボタンか<500購入>ボタンを押すと、お好きな数値が購入できます。前提条件 <100購入>ボタンは、当初から<form></form>内に直接記載されているボタンです。 <500購入>ボタンは、<追加表示ボタン>を押した際、AJAXにより、<form></form>内に新たに設置されるボタンです。問題点 <100購入>ボタンは問題なく稼働します。しかしながら、AJAXにより新たに設置された<500購入>ボタンを押しても、Formが稼働しません。どのようにすれば、AJAXにより新たに設置された<500購入>ボタンが稼働するようになるでしょうか? よろしくお願いいたします。 +++++++++++++++++++++++++++++++++++++++++++++++++++ 当方が作ったソース <script type="text/javascript" src="./js/jquery.js"></script> <form action="abc.cgi" method="post" name="form1" id="form1"> <div id="msg">ここへ出力</div> <button class="button8" type="submit" name="volume" value="100">100購入</button </form> <BR> <button id="btn0">追加表示</button> <script type="text/javascript"> jQuery(function($){ $("#btn0") .click(function () { $.ajax({ beforeSend:function(BTN){ $("#msg").append("<BR>新規ボタンを表示します<BR>"); }, complete: function (BTN, textStatus) { $("#msg").append("<button class=\"button8\" type=\"submit\" name=\"volume\" value=\"500\">500購入</button><BR>"); } }); }); }); </script>
- ベストアンサー
- JavaScript
1つのファイル上で複数のjavascriptを作動
ボタンを押したり、キーを入力すると別ファイルを呼び出すjavascriptがあります。今回、同じページに同スクリプトを2つ設置しました。 ********************************************* 【Script1】キーを入力すると./find.phpを呼び出す ********************************************* <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type='text/javascript'> $(document).ready(function(){ $("#search_results").slideUp(); $("#search_button").click(function(e){ e.preventDefault(); ajax_search(); }); $("#search_term").keyup(function(e){ e.preventDefault(); ajax_search(); }); }); function ajax_search(){ $("#search_results").show(); var search_val=$("#search_term").val(); $.post("./find.php", {search_term : search_val}, function(data){ if (data.length>0){ $("#search_results").html(data); } }) } </script> ************************************************* Script 1 を呼び出すキー入力画面 ************************************************* <form id="searchform" method="post"> <input type="text" name="search_term" id="search_term"/> <input type="submit" value="全表示" id="search_button" /> </form> ********************************************* 【Script 2】キーを入力すると./find_op.phpを呼び出す ********************************************* <script type='text/javascript'> $(document).ready(function(){ $("#search_results_op").slideUp(); $("#search_button_op").click(function(e){ e.preventDefault(); ajax_search(); }); $("#search_term_op").keyup(function(e){ e.preventDefault(); ajax_search(); }); }); function ajax_search(){ $("#search_results_op").show(); var search_val=$("#search_term_op").val(); $.post("./find_op.php", {search_term : search_val}, function(data2){ if (data2.length>0){ $("#search_results_op").html(data2); } }) } </script> ************************************************* Script 2 を呼び出すキー入力画面 ************************************************* <form id="searchform_op" method="post"> <input type="text" name="search_term_op" id="search_term_op" /> <input type="submit" value="全表示" id="search_button_op" /> </form> ********************************************* 問題点「Script 1 を呼び出すキー入力画面」上で文字を入力したりボタンを押したりすると、なぜかScript2が稼働してしまいます。 1つのページの中で、「Script 1」「Script2」がそれぞれ別々に稼働するためにはどこを変更すればよいでしょうか?
- ベストアンサー
- JavaScript
jQueryで4枚の画像がフェードアウトで切り替え
4枚の画像をフェードアウトで切り替えるものをjQueryのサイトを参考に作成しました。そこで、その右側に4つのボタンのようなものを配置し、 1枚目の画像が表示されているときは1つめのボタンが 2枚目の画像が表示されているときには2つめのボタンが選択されたような状態になり、「現在表示されている画像はこのボタンのものです」というようなものを実行したいです。途中まで、作業は進んでおり、 ■javaScript <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#contentsleft'; var fadeSpeed = 1500; var switchDelay = 4000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); ■HTML <div id="contentsleft"> <img src="./imgs/aaa01.jpg" alt="ホーム"> <img src="./imgs/bbb02.jpg" alt="ホーム"> <img src="./imgs/ccc03.jpg" alt="ホーム"> <img src="./imgs/ddd04.jpg" alt="ホーム"> </div> <button id="btn01">１</button> <button id="btn02">２</button> <button id="btn03">３</button> <button id="btn04">４</button> となっています。 javaScriptのところで、1枚目が表示されているときに1つめのボタンを選択状態にする。というような処理を施せばよいのでしょうが、知識不足でお手上げ状態です。ご教授いただければと思います。よろしくお願いします。
- ベストアンサー
- JavaScript
条件により押せないボタンを作りたい
2つのセレクトボックスがあり、どちらも選択していれば「検索」ボタンを押せるがどちらか1つでも選択していなければ「検索」ボタンを押せない状態にしたいのですがどのようにすれば可能でしょうか？ <script type="text/javascript"> jQuery(function() { jQuery('#change_btn').click(function() { jQuery.post('price.php', { size : jQuery('#size').attr('value'), days : jQuery('#days').attr('value') }, callBack); }); }); function callBack(data) { jQuery('#change_area').html(data); } </script> <form action="" id="form1" method="post"> <select name="size" id="size"> <option value="">---選択してください---</option> <option value="s1">サイズ01</option> <option value="s2">サイズ02</option> <option value="s3">サイズ03</option> </select> <select name="days" id="days"> <option value="">---選択してください---</option> <option value="d6">6日</option> <option value="d8">8日</option> </select> <input type="button" id="change_btn" value="検索" /> </form>
- ベストアンサー
- JavaScript
borderの箇所をマウスでクリック
cssでborderを指定し ajaxで枠内、枠外では何も動作しないが borderの箇所をマウスでクリックした場合のみ動ささせるにはどのようにすればいいでしょうか。 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $("div.button").mousedown(function () { $("div#message").text("マウスのボタンが押されました。"); }) $("div.button").mouseup(function () { $("div#message").text("マウスのボタンがはなされました。"); }) }) </script> <style> .button { border: solid 1px #0094ff; background-color: #e1e1e1; width: 200px; height: 32px; } </style> </head> <body> <div class="button">枠</div> <div id="message"></div> </body> </html>
- ベストアンサー
- AJAX
javascriptであるボタンを押すと他のボタンの表記が変わるというプログラムをつくりたいのですが。
モと表示された１個のボタンと穴と表示された２個のボタンを用意する。モのボタンをクリックするとそのボタンの法事は穴に変わり、残り２つの穴のどれかがモに変わる。穴のボタンをクリックされても何も変わらないプログラムをつくりたいのです。最初の状態からモをクリックして他のボタンを変化させることはなんとかできたのですが、そのあと移動したモをおしても同じことをできるようにするのができなくて困ってます。あと、できたらモを押して２つの穴のどちらかがモにかわるとき穴からモにかわるボタンは左側のもの、とかは決まってないでランダムだとうれしいです＞＜おねがいします！！！全然違うかもしれませんが、つくってみたのものっけておきます <html> <head> <title></title> <script type="text/javascript"> var moFlg = true; function func(){ if (moFlg) { document.getElementById("btn01").innerHTML = "穴"; document.getElementById("btn02").innerHTML = "モ"; document.getElementById("btn03").innerHTML = "穴"; moFlg = !moFlg; } else { document.getElementById("btn01").innerHTML = "穴"; document.getElementById("btn02").innerHTML = "穴"; document.getElementById("btn03").innerHTML = "モ"; moFlg = !moFlg; } } </script> </head> <body> <button id="btn01" type="button" " onClick="func()"> モ </button> <button id="btn02" type="button" " onClick=""> 穴 </button> <button id="btn03" type="button" " onClick=""> 穴 </button> </body> </html> ここまでです。でもできたら<input type ～ button　～ onClick>とかがつかわれているとうれしいです。
- ベストアンサー
- JavaScript
RSSでアメブロの画像をサイトに表示させたい
自社サイトにquery.zrssfeed.min.jsを使ってアメブロの画像を表示させたいと考えております。下記のソースコードですが、サイトに表示されません。正常に表示できるよう教示頂けますでしょうか <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="js/jquery.zrssfeed.min.js"></script> <script type="text/javascript">// <![CDATA[ $(document).ready(function () { $('#rss').rssfeed('http://rssblog.ameba.jp/creamg/rss.html',{ snippet: false }, function(e) { $(e).find('div.rssBody').vTicker({ showItems: 3 }); }); }); // ]]></script> <div id="rss"> </div>
- 締切済み
- HTML
hide()；について
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> jQuery(function($){ $('#target01').hide(); $('button','#id01').click(function(){ $('#target01').toggle('slow'); }); }); </script> <div id="id01"> <button>押してくれ</button> <div id="target01">文章</div> </div> 読み込みが完了するまで「文章」が表示されます。読み込み時も非表示したいのですが可能でしょか？？宜しく御願いします。
- 締切済み
- JavaScript
JqueryMobileでフォームボタンを非表示
JqueryMobileを使用している環境下でフォームボタンを非表示にする方法を探しています。以下はID1の消去ボタンをクリックすると、ID2のボタンが消えることを期待しているものです。しかし、ID2のボタンは消えませんでした。どのような方法で、フォームボタンを非表示にできるのでしょうか。なお、JqueryMobileを使用していない環境では、問題なくID2のボタンが非表示になることを確認していますので、 JqueryMobile使用時のJavascriptの制限が何かしらありそうなのですが・・・。 <form name="myForm" action="#"> <input type="button" value="消去" name="button1" id ="1" onclick="a()"> <input type="button" value="消えるボタン" name="button2" id ="2" > </form> <script type="text/javascript">  </script>
- ベストアンサー
- JavaScript