javascript - 在 jquery 中更改列表切换

标签 javascript jquery html css

我有这段代码，其中有两个列表。这有助于通过单击箭头按钮使列表项向右或向左移动。我想对其进行更改，以便在单击 ul > body 时将事件类切换为一次仅列表中的一项。当元素进入右侧列表时，其事件类将被删除。目前您可以在列表中选择多个元素。

我已经对此 JS 和 jQuery 进行了各种更改，但未能获得预期的结果。

$(function() {
  $('body').on('click', '.list-group .list-group-item', function() {
    $(this).toggleClass('active');
  });
  
  $('.list-arrows button').click(function() {
    var $button = $(this),
      actives = '';
    if ($button.hasClass('move-left')) {
      actives = $('.list-right ul li.active');
      actives.clone().appendTo('.list-left ul');
      actives.remove();
    } else if ($button.hasClass('move-right')) {
      actives = $('.list-left ul li.active');
      actives.clone().appendTo('.list-right ul');
      actives.remove();
    }
  });
  
  $('.dual-list .selector').click(function() {
    var $checkBox = $(this);
    if (!$checkBox.hasClass('selected')) {
      $checkBox.addClass('selected').closest('.well').find('ul li:not(.active)').addClass('active');
      $checkBox.children('i').removeClass('glyphicon-unchecked').addClass('glyphicon-check');
    } else {
      $checkBox.removeClass('selected').closest('.well').find('ul li.active').removeClass('active');
      $checkBox.children('i').removeClass('glyphicon-check').addClass('glyphicon-unchecked');
    }
  });
  
  $('[name="SearchDualList"]').keyup(function(e) {
    var code = e.keyCode || e.which;
    if (code == '9') return;
    if (code == '27') $(this).val(null);
    var $rows = $(this).closest('.dual-list').find('.list-group li');
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    $rows.show().filter(function() {
      var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
      return !~text.indexOf(val);
    }).hide();
  });
});
.dual-list .list-group {
  margin-top: 8px;
}

.list-left li,
.list-right li {
  cursor: pointer;
}

.list-arrows {
  padding-top: 100px;
}

.list-arrows button {
  margin-bottom: 20px;
}
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <br />
  <div class="row">

    <div class="dual-list list-left col-md-5">
      <div class="well text-right">
        <div class="row">
          <div class="col-md-10">
            <div class="input-group">
              <span class="input-group-addon glyphicon glyphicon-search"></span>
              <input type="text" name="SearchDualList" class="form-control" placeholder="search" />
            </div>
          </div>
          <div class="col-md-2">
            <div class="btn-group">
              <a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
            </div>
          </div>
        </div>
        <ul class="list-group">
          <li class="list-group-item">bootstrap-duallist <a href="https://github.com/bbilginn/bootstrap-duallist" target="_blank">github</a></li>
          <li class="list-group-item">Dapibus ac facilisis in</li>
          <li class="list-group-item">Morbi leo risus</li>
          <li class="list-group-item">Porta ac consectetur ac</li>
          <li class="list-group-item">Vestibulum at eros</li>
        </ul>
      </div>
    </div>

    <div class="list-arrows col-md-1 text-center">
      <button class="btn btn-default btn-sm move-left">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </button>

      <button class="btn btn-default btn-sm move-right">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </button>
    </div>

    <div class="dual-list list-right col-md-5">
      <div class="well">
        <div class="row">
          <div class="col-md-2">
            <div class="btn-group">
              <a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
            </div>
          </div>
          <div class="col-md-10">
            <div class="input-group">
              <input type="text" name="SearchDualList" class="form-control" placeholder="search" />
              <span class="input-group-addon glyphicon glyphicon-search"></span>
            </div>
          </div>
        </div>
        <ul class="list-group">
          <li class="list-group-item">Cras justo odio</li>
          <li class="list-group-item">Dapibus ac facilisis in</li>
          <li class="list-group-item">Morbi leo risus</li>
          <li class="list-group-item">Porta ac consectetur ac</li>
          <li class="list-group-item">Vestibulum at eros</li>
        </ul>
      </div>
    </div>
  </div>
</div>

最佳答案

您还需要removeClass sibling 。 Reference 

$('body').on('click', '.list-group .list-group-item', function() {
  $(this).toggleClass('active').siblings().removeClass('active');
});


$(function() {
  $('body').on('click', '.list-group .list-group-item', function() {
    $(this).toggleClass('active').siblings().removeClass('active');
  });
  
  $('.list-arrows button').click(function() {
    var $button = $(this),
      actives = '';
    if ($button.hasClass('move-left')) {
      actives = $('.list-right ul li.active');
      actives.clone().appendTo('.list-left ul');
      actives.remove();
    } else if ($button.hasClass('move-right')) {
      actives = $('.list-left ul li.active');
      actives.clone().appendTo('.list-right ul');
      actives.remove();
    }
  });
  
  $('.dual-list .selector').click(function() {
    var $checkBox = $(this);
    if (!$checkBox.hasClass('selected')) {
      $checkBox.addClass('selected').closest('.well').find('ul li:not(.active)').addClass('active');
      $checkBox.children('i').removeClass('glyphicon-unchecked').addClass('glyphicon-check');
    } else {
      $checkBox.removeClass('selected').closest('.well').find('ul li.active').removeClass('active');
      $checkBox.children('i').removeClass('glyphicon-check').addClass('glyphicon-unchecked');
    }
  });
  
  $('[name="SearchDualList"]').keyup(function(e) {
    var code = e.keyCode || e.which;
    if (code == '9') return;
    if (code == '27') $(this).val(null);
    var $rows = $(this).closest('.dual-list').find('.list-group li');
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    $rows.show().filter(function() {
      var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
      return !~text.indexOf(val);
    }).hide();
  });
});
.dual-list .list-group {
  margin-top: 8px;
}

.list-left li,
.list-right li {
  cursor: pointer;
}

.list-arrows {
  padding-top: 100px;
}

.list-arrows button {
  margin-bottom: 20px;
}
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <br />
  <div class="row">

    <div class="dual-list list-left col-md-5">
      <div class="well text-right">
        <div class="row">
          <div class="col-md-10">
            <div class="input-group">
              <span class="input-group-addon glyphicon glyphicon-search"></span>
              <input type="text" name="SearchDualList" class="form-control" placeholder="search" />
            </div>
          </div>
          <div class="col-md-2">
            <div class="btn-group">
              <a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
            </div>
          </div>
        </div>
        <ul class="list-group">
          <li class="list-group-item">bootstrap-duallist <a href="https://github.com/bbilginn/bootstrap-duallist" target="_blank">github</a></li>
          <li class="list-group-item">Dapibus ac facilisis in</li>
          <li class="list-group-item">Morbi leo risus</li>
          <li class="list-group-item">Porta ac consectetur ac</li>
          <li class="list-group-item">Vestibulum at eros</li>
        </ul>
      </div>
    </div>

    <div class="list-arrows col-md-1 text-center">
      <button class="btn btn-default btn-sm move-left">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </button>

      <button class="btn btn-default btn-sm move-right">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </button>
    </div>

    <div class="dual-list list-right col-md-5">
      <div class="well">
        <div class="row">
          <div class="col-md-2">
            <div class="btn-group">
              <a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
            </div>
          </div>
          <div class="col-md-10">
            <div class="input-group">
              <input type="text" name="SearchDualList" class="form-control" placeholder="search" />
              <span class="input-group-addon glyphicon glyphicon-search"></span>
            </div>
          </div>
        </div>
        <ul class="list-group">
          <li class="list-group-item">Cras justo odio</li>
          <li class="list-group-item">Dapibus ac facilisis in</li>
          <li class="list-group-item">Morbi leo risus</li>
          <li class="list-group-item">Porta ac consectetur ac</li>
          <li class="list-group-item">Vestibulum at eros</li>
        </ul>
      </div>
    </div>
  </div>
</div>

关于javascript - 在 jquery 中更改列表切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59354054/

上一篇：css - react js 轮播和位置

下一篇：css - react : Relative positioning of two divs within div

相关文章：

javascript - 当屏幕达到一定尺寸时使用 jQuery 或 javascript 删除 Div 标签？

javascript - 简单的 jquery 幻灯片修复我无法弄清楚

javascript - 如何使用 ".replace()"和 ".html()"将明文转换为图像标签？

html - 为什么这个 CSS margin-top 样式不起作用？

javascript - TypeError : document. getElementById(...) 为空 Django + JS

javascript - meteor 电流用户

javascript - 数组 .each() 循环返回字符串而不是 jQuery 中的值

javascript - 菜单选项卡、下一步和后退按钮过程

jquery - 如何仅在具有多个元素的div中隐藏文本JQUERY

javascript - 为什么我不能在 jQuery 中使用 .css() 更改行高 CSS 属性？

©2024 IT工具网  联系我们