js点击左右选中,js 选中：代码示例

1、要实现点击左右选中的效果，首先需要给左右按钮绑定点击事件。当点击左按钮时，需要将当前选中的元素向左移动一个位置；当点击右按钮时，需要将当前选中的元素向右移动一个位置。为了实现这个效果，可以使用JavaScript的事件监听机制来监听按钮的点击事件，并在事件处理函数中实现元素的移动逻辑。

示例代码如下：

HTML部分：

<div id="container">
  <div class="f4ff-f974-8f5f-d503 item">Item 1</div>
  <div class="f974-8f5f-d503-8633 item">Item 2</div>
  <div class="8f5f-d503-8633-6660 item">Item 3</div>
  <div class="d503-8633-6660-7f63 item">Item 4</div>
  <div class="8633-6660-7f63-e9ac item">Item 5</div>
</div>
<button id="leftBtn">左</button>
<button id="rightBtn">右</button>

JavaScript部分：

// 获取容器元素和按钮元素
var container = document.getElementById('container');
var leftBtn = document.getElementById('leftBtn');
var rightBtn = document.getElementById('rightBtn');
// 给左按钮绑定点击事件
leftBtn.addEventListener('click', function() {
  // 获取当前选中元素的索引
  var selectedIndex = Array.from(container.children).findIndex(function(item) {
    return item.classList.contains('selected');
  });
  // 如果当前选中元素不是第一个元素，则将其向左移动一个位置
  if (selectedIndex > 0) {
    container.children[selectedIndex].classList.remove('selected');
    container.children[selectedIndex - 1].classList.add('selected');
  }
});
// 给右按钮绑定点击事件
rightBtn.addEventListener('click', function() {
  // 获取当前选中元素的索引
  var selectedIndex = Array.from(container.children).findIndex(function(item) {
    return item.classList.contains('selected');
  });
  // 如果当前选中元素不是最后一个元素，则将其向右移动一个位置
  if (selectedIndex < container.children.length - 1) {
    container.children[selectedIndex].classList.remove('selected');
    container.children[selectedIndex + 1].classList.add('selected');
  }
});

在示例代码中，我们通过`addEventListener`方法给左右按钮分别绑定了点击事件。在点击事件处理函数中，我们首先通过`Array.from`方法将容器元素的子元素转换成数组，并使用`findIndex`方法找到当前选中元素的索引。然后根据点击的按钮和当前选中元素的位置，来判断是否需要进行元素的移动操作。如果需要移动，我们通过`classList`属性来添加或移除元素的类名，从而改变元素的样式。

通过以上代码，当点击左按钮时，当前选中元素会向左移动一个位置；当点击右按钮时，当前选中元素会向右移动一个位置。