質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.38%

  • JavaScript

    21496questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8549questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    5441questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Bootstrap

    1378questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 721

andrew57

score 110

前提・実現したいこと

Bootstrpを使い管理者用のページを作成しています。
その中に「公開」ボタン(下記画像参考)があるのですが、
ボタンを押すと、ボタンの表示が「公開取消」、もう一度ボタンを押すと「公開」、という感じで切り替えたい。

発生している問題・エラーメッセージ

jQueryのクリックイベントを使いその中にif文書こうとしていますが、
if文の中をどう書いたらよいのかわかりません。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <title>管理者用-トップ</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./css/admin_common.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <!-- ヘッダー -->
    <nav class="navbar navbar-default">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gnavi">
              <span class="sr-only">メニュー</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="./admin_top.html">SSS画像共有サイト(仮)-管理者用</a>
        </div>

        <div id="gnavi" class="collapse navbar-collapse  text-right">

            <div class="navbar-right">

                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="検索キーワード">
                    </div>
                </form>
                <ul class="nav navbar-nav">
                    <li><a href="./top.html" data-toggle="modal" data-target="#modal-upload"><strong>画像アップロード</strong></a></li>
                    <li><a href="./admin_top.html">トップページ</a></li>
                    <li><a href="./admin_account.html">アカウント管理ページ</a></li>
                    <li><a href="" data-toggle="modal" data-target="#modal-logout">ログアウト</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!--/ ヘッダー -->

    <!-- コンテンツ -->
    <div class="container">
      <div class="row">

        <div class="col-md-3">
          <div class="thumbnail">
              <div class="panel-body">
               <h3 class="text-center">Title</h3>
               <img src="https://www.fastpic.jp/images.php?file=9786860516.jpg" class="img-responsive center-block">
               <p class="text-center">Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusomd tempor incididunt ut labore et dolore magna aliqua.</p>
                  <p class="text-center">
                    <input class="btn btn-primary" type="button" value="公開" data-loading-text="実行中">
                    <input class="btn btn-danger" type="button" value="削除">
                 </p>
              </div>
           </div>
        </div>



        <div class="col-md-3">
          <div class="thumbnail">
              <div class="panel-body">
               <h3 class="text-center">Title</h3>
               <img src="https://www.fastpic.jp/images.php?file=9786860516.jpg" class="img-responsive center-block">
               <p class="text-center">Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusomd tempor incididunt ut labore et dolore magna aliqua.</p>
                  <p class="text-center">
                     <input class="btn btn-primary" type="button" value="公開">
                     <input class="btn btn-danger" type="button" value="削除">
                  </p>
              </div>
           </div>
        </div>



        <div class="col-md-3">
          <div class="thumbnail">
              <div class="panel-body">
               <h3 class="text-center">Title</h3>
               <img src="https://www.fastpic.jp/images.php?file=9786860516.jpg" class="img-responsive center-block">
               <p class="text-center">Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusomd tempor incididunt ut labore et dolore magna aliqua.</p>
                  <p class="text-center">
                     <input class="btn btn-primary" type="button" value="公開">
                     <input class="btn btn-danger" type="button" value="削除">
                  </p>
              </div>
           </div>
        </div>



        <div class="col-md-3">
          <div class="thumbnail">
              <div class="panel-body">
               <h3 class="text-center">Title</h3>
               <img src="https://www.fastpic.jp/images.php?file=9786860516.jpg" class="img-responsive center-block">
               <p class="text-center">Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusomd tempor incididunt ut labore et dolore magna aliqua.</p>
                  <p class="text-center">
                    <input class="btn btn-primary" type="button" value="公開">
                    <input class="btn btn-danger" type="button" value="削除">
                  </p>
              </div>
           </div>
        </div>



        <div class="col-md-3">
          <div class="thumbnail">
              <div class="panel-body">
               <h3 class="text-center">Title</h3>
               <img src="https://www.fastpic.jp/images.php?file=9786860516.jpg" class="img-responsive center-block">
               <p class="text-center">Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusomd tempor incididunt ut labore et dolore magna aliqua.</p>
                  <p class="text-center">
                    <input class="btn btn-primary" type="button" value="公開">
                    <input class="btn btn-danger" type="button" value="削除">
                  </p>
              </div>
           </div>
        </div>



        <div class="col-md-3">
          <div class="thumbnail">
              <div class="panel-body">
               <h3 class="text-center">Title</h3>
               <img src="https://www.fastpic.jp/images.php?file=9786860516.jpg" class="img-responsive center-block">
               <p class="text-center">Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusomd tempor incididunt ut labore et dolore magna aliqua.</p>
                  <p class="text-center">
                     <input class="btn btn-primary" type="button" value="公開">
                     <input class="btn btn-danger" type="button" value="削除">
                  </p>
              </div>
           </div>
        </div>



        <div class="col-md-3">
          <div class="thumbnail">
              <div class="panel-body">
               <h3 class="text-center">Title</h3>
               <img src="https://www.fastpic.jp/images.php?file=9786860516.jpg" class="img-responsive center-block">
               <p class="text-center">Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusomd tempor incididunt ut labore et dolore magna aliqua.</p>
                  <p class="text-center">
                     <input class="btn btn-primary" type="button" value="公開">
                     <input class="btn btn-danger" type="button" value="削除">
                  </p>
              </div>
           </div>
        </div>



        <div class="col-md-3">
          <div class="thumbnail">
              <div class="panel-body">
               <h3 class="text-center">Title</h3>
               <img src="https://www.fastpic.jp/images.php?file=9786860516.jpg" class="img-responsive center-block">
               <p class="text-center">Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusomd tempor incididunt ut labore et dolore magna aliqua.</p>
                  <p class="text-center">
                     <input class="btn btn-primary" type="button" value="公開" id="release">
                     <input class="btn btn-danger" type="button" value="削除">
                  </p>
              </div>
           </div>
        </div>


       <script src="script.js"></script>
       </div>
    </div>
    <!--/コンテンツ -->

</body>

</html>

jQuery

$(function() {
  //公開・公開削除ボタンのクリックイベント
   $("#release").click(function() {
     if ( )
    }
  });
});

イメージ説明

補足情報(言語/FW/ツール等のバージョンなど)

HTNL,Bootstrp,javascript,jQuery

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

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

var released = ($(this).val() == "公開");
if (released){
    //
    // 公開用の処理をここに書く
    //
    $(this).val("公開取消");
} else {
    //
    // 公開取消用の処理をここに書く
    //
    $(this).val("公開");
}

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

質問の内容に対しては

$(function() {
//公開・公開削除ボタンのクリックイベント
 $("#release").click( function() {
     if( this.value === '公開' ){
         this.value = '公開取消';
     }else{
         this.value = '公開';
     }
    });
});


で解決しますが、おそらくバックグランドの処理も行うかと思うので、この後また行き詰る気がします。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    21496questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8549questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    5441questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Bootstrap

    1378questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。