javascript - jQueryは、クリック時にラベル付きのボタンドロップダウンリストを置き換えます

Question

各行の列としてボタン ドロップダウン リストを持つテーブルがあります。ユーザーがドロップダウンから選択すると、ドロップダウンを、ユーザーが行った選択を反映するラベルに置き換える必要があります。私はこれを機能させていますが、最初のドロップダウンリストでのみ機能します。

行番号が異なることを除いて、行はそれぞれこれと同じです。

<tr>
      <td>1.</td>
      <td>
        <!-- Single button -->
        <div class="btn-group" id="MACdropdown">
          <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
          Action <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a id="move" href="#">Move Assets</a></li>
            <li><a id="swap" href="#">SWAP Assets</a></li>
            <li><a id="add" href="#">Add Assets</a></li>
            <li><a id="cancel" href="#">Cancel Assets</a></li>
            <li><a id="change" href="#">Change Assets</a></li>
            <li class="divider"></li>
            <li><a href="#">Entire Site Move</a></li>
          </ul>
        </div>

      </td>
      <td>4534-23423</td>
      <td>123-234</td>
      <td>346</td>
      </tr>

JS:

$(document).ready(function(){

    $("#MACdropdown").on('click' , 'a#move' , function(){
      $('#MACdropdown').replaceWith('<a href="viewassets-move.html"><span class="label label-danger">MOVE</span></a>');
        })
    $("#MACdropdown").on('click' , 'a#swap' , function(){
      $('#MACdropdown').replaceWith('<a href="viewassets-move.html"><span class="label label-danger">SWAP</span></a>');
        })
    $("#MACdropdown").on('click' , 'a#add' , function(){
      $('#MACdropdown').replaceWith('<a href="viewassets-move.html"><span class="label label-danger">ADD</span></a>');
        })
    $("#MACdropdown").on('click' , 'a#cancel' , function(){
      $('#MACdropdown').replaceWith('<a href="viewassets-move.html"><span class="label label-danger">CANCEL</span></a>');
        })
    $("#MACdropdown").on('click' , 'a#change' , function(){
      $('#MACdropdown').replaceWith('<a href="viewassets-move.html"><span class="label label-danger">CHANGE</span></a>');
    })


  });

ページのドロップダウン リストごとに個別の JS ステートメントのセットを作成する必要はありません。例: #MACdropdown を #MACdropdown1 などに変更し、別の関数を作成します。

詳細については、Fiddle をご覧ください: http://bootply.com/75941

Answer 1

ご存知のように一意である必要がある ID ではなく、そのクラスを使用して各ドロップダウンを参照する必要があります。上記のコードを数回繰り返しても、最初のドロップダウンのみを処理することになります。

HTML:

    <tr>
      <td>1.</td>
      <td>
        <!-- Single button -->
        <div class="btn-group" class="MACdropdown" id="MACdropdown1">
          <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
          Action <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a class="move" href="#">Move Assets</a></li>
            <li><a class="swap" href="#">SWAP Assets</a></li>
            <li><a class="add" href="#">Add Assets</a></li>
            <li><a class="cancel" href="#">Cancel Assets</a></li>
            <li><a class="change" href="#">Change Assets</a></li>
            <li class="divider"></li>
            <li><a href="#">Entire Site Move</a></li>
          </ul>
        </div>

      </td>
      <td>4534-23423</td>
      <td>123-234</td>
      <td>346</td>
      </tr>

JS:

$(document).ready(function(){

    $(".MACdropdown").on('click' , 'a.move' , function(){
      $(this).closest('.MACdropdown').replaceWith('<a href="viewassets-move.html"><span class="label label-danger">MOVE</span></a>');
        })
    $(".MACdropdown").on('click' , 'a.swap' , function(){
      $(this).closest('.MACdropdown').replaceWith('<a href="viewassets-move.html"><span class="label label-danger">SWAP</span></a>');
        })
    $(".MACdropdown").on('click' , 'a.add' , function(){
      $(this).closest('.MACdropdown').replaceWith('<a href="viewassets-move.html"><span class="label label-danger">ADD</span></a>');
        })
    $(".MACdropdown").on('click' , 'a.cancel' , function(){
      $(this).closest('.MACdropdown').replaceWith('<a href="viewassets-move.html"><span class="label label-danger">CANCEL</span></a>');
        })
    $(".MACdropdown").on('click' , 'a.change' , function(){
      $(this).closest('.MACdropdown').replaceWith('<a href="viewassets-move.html"><span class="label label-danger">CHANGE</span></a>');
    })


  });

ご覧のとおり、ID はまったく使用していません。各選択は同じように動作し、その子コントロールは彼に影響を与えるだけです (closest('.MACDropdown') の代わりに親セレクターを使用することもできますが、レイアウトを少し変更する場合に備えて後者を選択しました。

Answer 2

ページごとの要素ごとに 1 つの ID のみ。代わりにクラスを使用してください。

jQuery:

$(document).ready(function(){

        $(".MACdropdown").on('click' , 'a#move' , function(){
          $(this).parent().parent().parent().replaceWith('<a href="viewassets-move.html"><span class="label label-danger">MOVE</span></a>');
            })
        $(".MACdropdown").on('click' , 'a#swap' , function(){
          $(this).parent().parent().parent().replaceWith('<a href="viewassets-move.html"><span class="label label-danger">SWAP</span></a>');
            })
        $(".MACdropdown").on('click' , 'a#add' , function(){
          $(this).parent().parent().parent().replaceWith('<a href="viewassets-move.html"><span class="label label-danger">ADD</span></a>');
            })
        $(".MACdropdown").on('click' , 'a#cancel' , function(){
          $(this).parent().parent().parent().replaceWith('<a href="viewassets-move.html"><span class="label label-danger">CANCEL</span></a>');
            })
        $(".MACdropdown").on('click' , 'a#change' , function(){
          $(this).parent().parent().parent().replaceWith('<a href="viewassets-move.html"><span class="label label-danger">CHANGE</span></a>');
        })


      });

HTML:

<table class="table table-striped">
<tbody><tr>
          <td>1.</td>
          <td>
            <!-- Single button -->
            <div class="btn-group" class="MACdropdown">
              <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
              Action <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li><a id="move" href="#">Move Assets</a></li>
                <li><a id="swap" href="#">SWAP Assets</a></li>
                <li><a id="add" href="#">Add Assets</a></li>
                <li><a id="cancel" href="#">Cancel Assets</a></li>
                <li><a id="change" href="#">Change Assets</a></li>
                <li class="divider"></li>
                <li><a href="#">Entire Site Move</a></li>
              </ul>
            </div>

          </td>
          <td>4534-23423</td>
          <td>123-234</td>
          <td>346</td>
  </tr>
  <tr>
          <td>2.</td>
          <td>
            <!-- Single button -->
            <div class="btn-group" class="MACdropdown">
              <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
              Action <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li><a id="move" href="#">Move Assets</a></li>
                <li><a id="swap" href="#">SWAP Assets</a></li>
                <li><a id="add" href="#">Add Assets</a></li>
                <li><a id="cancel" href="#">Cancel Assets</a></li>
                <li><a id="change" href="#">Change Assets</a></li>
                <li class="divider"></li>
                <li><a href="#">Entire Site Move</a></li>
              </ul>
            </div>

          </td>
          <td>4534-23423</td>
          <td>123-234</td>
          <td>346</td>
  </tr>
  <tr>
          <td>3.</td>
          <td>
            <!-- Single button -->
            <div class="btn-group" class="MACdropdown">
              <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
              Action <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li><a id="move" href="#">Move Assets</a></li>
                <li><a id="swap" href="#">SWAP Assets</a></li>
                <li><a id="add" href="#">Add Assets</a></li>
                <li><a id="cancel" href="#">Cancel Assets</a></li>
                <li><a id="change" href="#">Change Assets</a></li>
                <li class="divider"></li>
                <li><a href="#">Entire Site Move</a></li>
              </ul>
            </div>

          </td>
          <td>4534-23423</td>
          <td>123-234</td>
          <td>346</td>
  </tr>
</tbody></table>

Answer 3

編集: ID をクラスに変更し、以下を使用します。重複した ID を使用すると、セレクターで使用すると、見つかった最初の要素が選択されるだけで、クラス セレクターはそのクラスのすべての項目が選択されます。各 onclick 関数内では、変更を行う前に「this」を使用して自分自身を参照します。

$(document).ready(function(){

    $(".MACdropdown").on('click' , 'a#move' , function(){
      $(this).replaceWith('<a href="viewassets-move.html"><span class="label label-danger">MOVE</span></a>');
    })
    $(".MACdropdown").on('click' , 'a#swap' , function(){
      $(this).replaceWith('<a href="viewassets-move.html"><span class="label label-danger">SWAP</span></a>');
    })
    $(".MACdropdown").on('click' , 'a#add' , function(){
      $(this).replaceWith('<a href="viewassets-move.html"><span class="label label-danger">ADD</span></a>');
    })
    $(".MACdropdown").on('click' , 'a#cancel' , function(){
      $(this).replaceWith('<a href="viewassets-move.html"><span class="label label-danger">CANCEL</span></a>');
    })
    $(".MACdropdown").on('click' , 'a#change' , function(){
      $(this).replaceWith('<a href="viewassets-move.html"><span class="label label-danger">CHANGE</span></a>');
    })


});

Answer 4

ページ内で同じ css id を使用することはできません。使用すると、最初に出現した id のみが選択されます。

行ごとに一意のクラスを使用します。このようにコードを変更します..そして

一意の ID を使用してリンクをドロップダウンすることもできます。その場合、どの行のボタンがクリックされたかを見つけることができるのは私たちだけです (その ID もインクリメントします)。

   <tr>
      <td>1.</td>
      <td>
        <!-- Single button -->
        <div class="btn-group" id="MACdropdown_1"> // should increment for each row
          <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
          Action <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a id="move_1" href="#">Move Assets</a></li> 
            <li><a id="swap_1" href="#">SWAP Assets</a></li>
            <li><a id="add_1" href="#">Add Assets</a></li>
            <li><a id="cancel_1" href="#">Cancel Assets</a></li>
            <li><a id="change_1" href="#">Change Assets</a></li>
            <li class="divider"></li>
            <li><a href="#">Entire Site Move</a></li>
          </ul>
        </div>

      </td>
      <td>4534-23423</td>
      <td>123-234</td>
      <td>346</td>
      </tr>

js で、ドロップダウンをオンクリックし、最後の数値フィールドを抽出してから、ドロップダウンをその数値で更新します。