jQueryで「公開」と「公開削除」ボタンを交互に切り替えたい

###前提・実現したいこと
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件

ベストアンサー

ボタン自身の文字が「公開」であるかどうかで判定するのが最も簡単に処理できます。
公開・公開取消は、表示をそうするだけではなく、なんらかの処理をしますよね？
その処理が終わった後に、ボタンの表示を切り替えましょう。

javascript
1var released = ($(this).val() == "公開");
2if (released){
3	//
4	// 公開用の処理をここに書く
5	//
6	$(this).val("公開取消");
7} else {
8	//
9	// 公開取消用の処理をここに書く
10	//
11	$(this).val("公開");
12}

ただし、この公開処理や公開停止処理に時間がかかるようであれば、処理中はボタンのクリックが効かないようにdisabledを設定したり、処理中だとわかるようなグルグル画像を表示するなどの工夫が必要になってきます。

投稿2017/08/19 09:24

zohnam

総合スコア1441

質問の内容に対しては

javascript
1$(function() {
2//公開・公開削除ボタンのクリックイベント
3 $("#release").click( function() {
4	 if( this.value === '公開' ){
5		 this.value = '公開取消';
6	 }else{
7		 this.value = '公開';
8	 }
9	});
10});