###前提・実現したいこと
Bootstrpを使い管理者用のページを作成しています。
その中に「公開」ボタン(下記画像参考)があるのですが、
ボタンを押すと、ボタンの表示が「公開取消」、もう一度ボタンを押すと「公開」、という感じで切り替えたい。
###発生している問題・エラーメッセージ
jQueryのクリックイベントを使いその中にif文書こうとしていますが、
if文の中をどう書いたらよいのかわかりません。
###該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <title>管理者用-トップ</title> 6 <meta charset="utf-8"> 7 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 8 <link rel="stylesheet" type="text/css" href="./css/admin_common.css"> 9 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 10 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 11</head> 12 13<body> 14 <!-- ヘッダー --> 15 <nav class="navbar navbar-default"> 16 <div class="navbar-header"> 17 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gnavi"> 18 <span class="sr-only">メニュー</span> 19 <span class="icon-bar"></span> 20 <span class="icon-bar"></span> 21 <span class="icon-bar"></span> 22 </button> 23 <a class="navbar-brand" href="./admin_top.html">SSS画像共有サイト(仮)-管理者用</a> 24 </div> 25 26 <div id="gnavi" class="collapse navbar-collapse text-right"> 27 28 <div class="navbar-right"> 29 30 <form class="navbar-form navbar-left" role="search"> 31 <div class="form-group"> 32 <input type="text" class="form-control" placeholder="検索キーワード"> 33 </div> 34 </form> 35 <ul class="nav navbar-nav"> 36 <li><a href="./top.html" data-toggle="modal" data-target="#modal-upload"><strong>画像アップロード</strong></a></li> 37 <li><a href="./admin_top.html">トップページ</a></li> 38 <li><a href="./admin_account.html">アカウント管理ページ</a></li> 39 <li><a href="" data-toggle="modal" data-target="#modal-logout">ログアウト</a></li> 40 </ul> 41 </div> 42 </div> 43 </nav> 44 <!--/ ヘッダー --> 45 46 <!-- コンテンツ --> 47 <div class="container"> 48 <div class="row"> 49 50 <div class="col-md-3"> 51 <div class="thumbnail"> 52 <div class="panel-body"> 53 <h3 class="text-center">Title</h3> 54 <img src="https://www.fastpic.jp/images.php?file=9786860516.jpg" class="img-responsive center-block"> 55 <p class="text-center">Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusomd tempor incididunt ut labore et dolore magna aliqua.</p> 56 <p class="text-center"> 57 <input class="btn btn-primary" type="button" value="公開" data-loading-text="実行中"> 58 <input class="btn btn-danger" type="button" value="削除"> 59 </p> 60 </div> 61 </div> 62 </div> 63 64 65 66 <div class="col-md-3"> 67 <div class="thumbnail"> 68 <div class="panel-body"> 69 <h3 class="text-center">Title</h3> 70 <img src="https://www.fastpic.jp/images.php?file=9786860516.jpg" class="img-responsive center-block"> 71 <p class="text-center">Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusomd tempor incididunt ut labore et dolore magna aliqua.</p> 72 <p class="text-center"> 73 <input class="btn btn-primary" type="button" value="公開"> 74 <input class="btn btn-danger" type="button" value="削除"> 75 </p> 76 </div> 77 </div> 78 </div> 79 80 81 82 <div class="col-md-3"> 83 <div class="thumbnail"> 84 <div class="panel-body"> 85 <h3 class="text-center">Title</h3> 86 <img src="https://www.fastpic.jp/images.php?file=9786860516.jpg" class="img-responsive center-block"> 87 <p class="text-center">Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusomd tempor incididunt ut labore et dolore magna aliqua.</p> 88 <p class="text-center"> 89 <input class="btn btn-primary" type="button" value="公開"> 90 <input class="btn btn-danger" type="button" value="削除"> 91 </p> 92 </div> 93 </div> 94 </div> 95 96 97 98 <div class="col-md-3"> 99 <div class="thumbnail"> 100 <div class="panel-body"> 101 <h3 class="text-center">Title</h3> 102 <img src="https://www.fastpic.jp/images.php?file=9786860516.jpg" class="img-responsive center-block"> 103 <p class="text-center">Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusomd tempor incididunt ut labore et dolore magna aliqua.</p> 104 <p class="text-center"> 105 <input class="btn btn-primary" type="button" value="公開"> 106 <input class="btn btn-danger" type="button" value="削除"> 107 </p> 108 </div> 109 </div> 110 </div> 111 112 113 114 <div class="col-md-3"> 115 <div class="thumbnail"> 116 <div class="panel-body"> 117 <h3 class="text-center">Title</h3> 118 <img src="https://www.fastpic.jp/images.php?file=9786860516.jpg" class="img-responsive center-block"> 119 <p class="text-center">Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusomd tempor incididunt ut labore et dolore magna aliqua.</p> 120 <p class="text-center"> 121 <input class="btn btn-primary" type="button" value="公開"> 122 <input class="btn btn-danger" type="button" value="削除"> 123 </p> 124 </div> 125 </div> 126 </div> 127 128 129 130 <div class="col-md-3"> 131 <div class="thumbnail"> 132 <div class="panel-body"> 133 <h3 class="text-center">Title</h3> 134 <img src="https://www.fastpic.jp/images.php?file=9786860516.jpg" class="img-responsive center-block"> 135 <p class="text-center">Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusomd tempor incididunt ut labore et dolore magna aliqua.</p> 136 <p class="text-center"> 137 <input class="btn btn-primary" type="button" value="公開"> 138 <input class="btn btn-danger" type="button" value="削除"> 139 </p> 140 </div> 141 </div> 142 </div> 143 144 145 146 <div class="col-md-3"> 147 <div class="thumbnail"> 148 <div class="panel-body"> 149 <h3 class="text-center">Title</h3> 150 <img src="https://www.fastpic.jp/images.php?file=9786860516.jpg" class="img-responsive center-block"> 151 <p class="text-center">Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusomd tempor incididunt ut labore et dolore magna aliqua.</p> 152 <p class="text-center"> 153 <input class="btn btn-primary" type="button" value="公開"> 154 <input class="btn btn-danger" type="button" value="削除"> 155 </p> 156 </div> 157 </div> 158 </div> 159 160 161 162 <div class="col-md-3"> 163 <div class="thumbnail"> 164 <div class="panel-body"> 165 <h3 class="text-center">Title</h3> 166 <img src="https://www.fastpic.jp/images.php?file=9786860516.jpg" class="img-responsive center-block"> 167 <p class="text-center">Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusomd tempor incididunt ut labore et dolore magna aliqua.</p> 168 <p class="text-center"> 169 <input class="btn btn-primary" type="button" value="公開" id="release"> 170 <input class="btn btn-danger" type="button" value="削除"> 171 </p> 172 </div> 173 </div> 174 </div> 175 176 177 <script src="script.js"></script> 178 </div> 179 </div> 180 <!--/コンテンツ --> 181 182</body> 183 184</html> 185
jQuery
javascript
1$(function() { 2 //公開・公開削除ボタンのクリックイベント 3 $("#release").click(function() { 4 if ( ) 5 } 6 }); 7});
###補足情報(言語/FW/ツール等のバージョンなど)
HTNL,Bootstrp,javascript,jQuery
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。