0

我有一个带有按钮下拉列表的表格作为每行的一列。当用户从下拉列表中选择时，我希望将下拉列表替换为反映他们所做选择的标签。我有这个工作，但它只会在第一个下拉列表中。

行与此相同，除了不同的行号：

<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 等并制作单独的函数。

查看小提琴以获取更多信息：http ://bootply.com/75941

4

4 回答 4

3

您应该使用其类而不是 ID 来引用每个下拉列表，如您所知，ID 必须是唯一的。如果您多次重复上述代码，您仍然只会处理第一个 dropdown 。

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。每个选择的行为都相同，并且它的子控件只会影响他（您也可以使用父选择器而不是最接近的（'.MACDropdown'），但我选择了后者，以防您稍微更改布局。

于 2013-08-21T14:40:47.930 回答
0

编辑：将您的 id 更改为 classes 并使用以下内容。使用重复的 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>');
    })


});
于 2013-08-21T14:36:23.233 回答
0

每页每个元素只有一个 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>
于 2013-08-21T14:41:52.140 回答
0

在一个页面中，您不能使用相同的 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 中，单击下拉菜单，提取最后一个数字字段，然后使用该数字值更新下拉菜单。

于 2013-08-21T14:46:30.353 回答