js点击左右选中

在JavaScript中实现点击左右按钮进行选中的功能，通常涉及到DOM操作和事件处理。以下是一个基础的实现示例，包括HTML结构、CSS样式和JavaScript逻辑。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击左右选中</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <button id="leftBtn">左</button>
        <div class="items">
            <div class="item" data-index="0">选项1</div>
            <div class="item" data-index="1">选项2</div>
            <div class="item" data-index="2">选项3</div>
        </div>
        <button id="rightBtn">右</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS样式

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.items {
    display: flex;
    margin: 0 20px;
}

.item {
    padding: 10px 20px;
    border: 1px solid #ccc;
    margin: 0 5px;
    cursor: pointer;
}

.item.selected {
    background-color: #007bff;
    color: white;
}

JavaScript逻辑

document.addEventListener('DOMContentLoaded', function() {
    const items = document.querySelectorAll('.item');
    const leftBtn = document.getElementById('leftBtn');
    const rightBtn = document.getElementById('rightBtn');
    let selectedIndex = 0;

    function updateSelection() {
        items.forEach((item, index) => {
            item.classList.toggle('selected', index === selectedIndex);
        });
    }

    leftBtn.addEventListener('click', function() {
        selectedIndex = (selectedIndex - 1 + items.length) % items.length;
        updateSelection();
    });

    rightBtn.addEventListener('click', function() {
        selectedIndex = (selectedIndex + 1) % items.length;
        updateSelection();
    });

    // 初始化选中第一个选项
    updateSelection();
});

解释

HTML结构：包含两个按钮（左和右）和一个选项列表。
CSS样式：定义了基本的布局和选中状态的样式。
JavaScript逻辑：
- 监听按钮点击事件。
- 更新选中项的索引，并调用updateSelection函数更新DOM中的选中状态。
- updateSelection函数遍历所有选项，根据当前选中索引添加或移除selected类。

应用场景

这种点击左右按钮进行选中的功能常见于轮播图、选项卡切换、图片浏览器等场景。

可能遇到的问题及解决方法

选中状态不同步：确保每次点击按钮后都正确更新选中索引并刷新DOM。
边界条件处理：使用取模运算确保索引在合法范围内循环。
性能问题：对于大量选项，可以考虑虚拟化渲染或优化DOM操作。

通过以上示例和解释，你应该能够实现一个基本的点击左右按钮进行选中的功能，并根据具体需求进行扩展和优化。

页面内容是否对你有帮助？

有帮助

没帮助

删除viewController的页边距

、、、

我费了几个小时才把左边和右边的空白去掉。我想删除tableView和边框之间的空格。

浏览 3提问于2016-10-28得票数 1

1回答

选项卡内的复选框切换引导

、、、、

我正在尝试创建具有添加checkbox功能的选项卡，但随着data-toggle="tabs"的出现，checkbox似乎无法工作。有没有办法让复选框在标签内切换时起作用？

浏览 2提问于2020-01-10得票数 0

1回答

highcharts.js:无法选择密集序列中的某些点

、

我使用的高图表/高股3.0.7在一个系列与1000点左右。当我将想要选择的点悬停时，它会变大，但当我点击它时，另一个在x维中非常接近的点就会被选中和标记。见图。

浏览 2提问于2014-10-29得票数 0

回答已采纳

1回答

如何使用Django模型的值填充表中的复选框

、、、

然而，所有的复选框都没有被选中，尽管我已经通过Django中的/admin/验证了dbase中的一些值确实是“真”的。firstName和lastName在没有任何问题的情况下加载到表中。

浏览 2提问于2022-10-31得票数 1

回答已采纳

3回答

如何在Python Spyder中自动换行？

、、

我是Python的新手。我使用的是Spyder 4.0.1，Python 3.7。Spyder内置的PEP-8约定代码样式检查返回错误E501 (行太长)。虽然我设置了垂直线和换行，但对于长字符行，它仍然显示错误。Pycharm会自动换行，但我在Spyder中找不到任何有效的解决方案。我该怎么办？我必须手动按Enter键才能排长队吗？谢谢。

浏览 29提问于2020-07-10得票数 7

2回答

我应该如何教机器学习算法使用数据与大比例的班级？(支持向量机)

、、、

我试图教我的支持向量机算法，使用的数据点击和转换的人谁看到了横幅。主要的问题是点击量占所有数据的0.2%左右，所以它在数据中的比例很大。平均而言，它给出了99.8%的正确答案(因为不成比例)，但如果您选中“单击”或“转换”，则可以给出0%的正确预测。如何调整支持向量机算法(或选择另一种算法)以考虑不均衡？

浏览 3提问于2013-08-06得票数 8

回答已采纳

2回答

slickgrid选择行，而筛选器处于打开状态时忘记先前的选择

我遵循下面的示例：现在这个问题已经被看到了。对我来说，只选择第2、6、8和29行。我希望从0到10，29仍然被选中。有没有选择来得到这种行为？如果没有，有人能推荐一种可行的方法吗？

浏览 1提问于2012-08-31得票数 0

回答已采纳

3回答

如何为右击和左键保留两个不同的事件？我要左键是zoomIn，右击是zoomOut，如果有任何错误或错误，请用以下方式编写我的代码 private void pictureBox1_MouseClick_1(object sender, MouseEventArgs e) if (e.Button == System.Windows.Forms.MouseButtons.Right ) double zoomLevel = 1.1;

浏览 1提问于2014-06-03得票数 0

回答已采纳

1回答

MySql，从3个不同的表中计数数据，优化查询

在贴子页上，我试图显示注释的数量、用户订阅的数量和书签的数量我有三个单独的请求SELECT count (*) FROM comments如何进行优化？

浏览 2提问于2022-07-11得票数 -3

1回答

在ASP.NET窗体(单选按钮列表)内停止回发-返回false且preventDefault不起作用

、、、、

我和AutoPostback有一份单选按钮名单。单击特定项时，我希望停止回发并显示一个窗口。我曾尝试停止回发，但没有成功。因此:有关于如何停止回发的想法吗？我尝试过preventDefault()、e.stopImmediatePropagation()、e.stopPropagation()并返回false。 <asp:RadioButtonList ID="rblShippingMethod" runat="serve

浏览 4提问于2013-06-25得票数 2

回答已采纳

1回答

如何远程调试微信小程序解决方案的后台代码？

浏览 855提问于2017-11-13

2回答

jQuery如何区分左右点击鼠标？

你如何获得使用jQuery点击鼠标按钮？

浏览 311提问于2017-12-18

1回答

找不到node.js二进制文件

有一天我打开电脑想了解更多，但它一直说：“找不到Node.js二进制文件”节点“：路径不存在。请确保Node.js已安装在您的路径中，或者在您的launch.json中设置"runtimeExecutable”。“我不知道发生了什么，我的编程语言很少。操作系统: macOS Big Sur

浏览 1提问于2021-06-12得票数 0

1回答

如何在jQuery中模拟单选按钮功能？

、、、

icon-check-empty');});1)点击按钮1:按钮1勾选，其他未勾选3)点击按钮1：(见#1)基本上，我需要一组单选按钮

浏览 4提问于2013-04-20得票数 0

回答已采纳

1回答

QTableView中左右点击的区别

、、

我有一个QTableView，其中左键和右击鼠标都会导致一些工作..。为此，我在我的QMainWindow中使用以下连接 connect(Table , SIGNAL (clicked ( const QModelIndex&)), this, SLOT(test())); 这个

浏览 3提问于2013-02-12得票数 1

回答已采纳

1回答

UIButton在iPhone 6 Plus上的边界

、、

我正在做一个项目，在这个项目中我希望UIButton跨越屏幕的宽度。这在除iOS 6+之外的所有iPhone设备上都能很好地工作。如下图所示，iPhone 6 Plus是唯一不从屏幕边缘开始的设备。我怎样才能让UIButton从边缘到边缘的iPhone 6+也？

浏览 3提问于2015-09-10得票数 0

回答已采纳

1回答

使用Vue.js，是否可以使用单个事件侦听器监听从多个元素发出的所有事件？

、、、

我有一些div格式化为按钮(总共20左右)。谢谢!

浏览 1提问于2017-10-24得票数 1

4回答

无法同时更改复选框选中状态

、、

当我选中‘星期一’的复选框时，‘星期二’的选中状态被更新。它同时工作得很好。但是，一旦我点击选中或取消选中“星期二”，如果我选中“星期一”，“星期二”就不再像“星期一”那样改变状态。在选中/取消选中“星期二”后，它不会与“星期一”复选框同步。 this.checked);}); <script src="https://ajax.googleapis.com/ajax/

浏览 38提问于2021-03-01得票数 3

回答已采纳

2回答

自定义复选框不选中

、、

我正在尝试自定义我的复选框，我已经尝试了几个不同的教程，但对于每个单独的教程，我仍然无法选中或取消选中。到目前为止，我的代码如下：有谁知道是什么让点击保持选中/取消<e

浏览 5提问于2019-12-23得票数 0

1回答

关闭模式并通过背景单击隐藏模式

、、

我需要添加一些代码来消除按钮，并通过点击身体，得到黑色的背景颜色。我怎样才能找到这个黑区?什么是id或类名？对于我在js文件中创建了data-dismiss='modal'的按钮，单击该按钮可以执行一些操作...这就是取消选中所有选中的单选按钮，因为如果我关闭它们，它们将保持选中状态。所以我在点击按钮时添加了这段代码 $('input[type=radio]')

浏览 16提问于2016-08-05得票数 0

点击加载更多