jquery实现左右选择

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，开发者可以更方便地实现复杂的页面交互效果。

类型

jQuery 实现左右选择通常涉及到元素的拖拽、排序、选择等交互效果。常见的类型包括：

拖拽排序：允许用户通过拖拽来重新排列元素。
选择框：通过复选框或单选按钮实现元素的选择。
滑动选择：通过滑动条或滑块来选择值。

应用场景

购物车：用户可以通过拖拽或点击来选择商品。
任务管理：用户可以通过拖拽来重新排序任务。
配置页面：用户可以通过滑动条来调整设置值。

示例代码

以下是一个简单的示例，展示如何使用 jQuery 实现左右选择框的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 左右选择</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .container {
            display: flex;
        }
        .left, .right {
            border: 1px solid #ccc;
            padding: 10px;
            width: 200px;
            min-height: 200px;
        }
        .item {
            padding: 5px;
            border: 1px solid #ddd;
            margin: 5px 0;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            <div class="item">Item 1</div>
            <div class="item">Item 2</div>
            <div class="item">Item 3</div>
        </div>
        <div class="right"></div>
    </div>

    <script>
        $(document).ready(function() {
            $('.left .item').click(function() {
                $(this).appendTo('.right');
            });

            $('.right .item').click(function() {
                $(this).appendTo('.left');
            });
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：元素无法拖拽或移动

原因：可能是 jQuery UI 库未引入或版本不兼容。

解决方法：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

问题：元素选择不灵敏

原因：可能是事件绑定不正确或冲突。

解决方法：

确保事件绑定在文档加载完成后进行：

$(document).ready(function() {
    // 事件绑定代码
});

问题：样式显示不正确

原因：可能是 CSS 样式冲突或未正确引入。

解决方法：

检查并确保 CSS 样式正确引入，并避免与其他样式冲突：

<style>
    /* 样式代码 */
</style>

通过以上方法，可以解决大部分 jQuery 实现左右选择时遇到的问题。

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

有帮助

没帮助

全球曝光| jQuery与Backbone

、、

Backbone在前50行左右的代码中暴露了自己。为什么会有不同？ window.jQuery = window.$ = jQuery; // near bottom..can someone

浏览 1提问于2012-09-28得票数 4

1回答

JQuery SmoothDivScroll和箭头键

、、

我需要让JQuery 使用箭头键盘键-左右键应该滚动内容，就像鼠标滚轮和热点一样。我如何使用定制的JQuery代码来实现这一点？

浏览 2提问于2013-01-04得票数 0

回答已采纳

2回答

在手机图片中滑动(左右)最好/最简单的方法是什么？

、

我正在使用Jquery，我想继续使用它。我知道jquery mobile，但如果我能避免它，那就更好了。如果我没有选择，我无论如何都会使用它。类似于我用“鼠标滚轮”事件实现的东西，但在移动设备上是左右滑动的(而不是鼠标滚轮)。如果有任何建议，我将不胜感激

浏览 30提问于2019-07-26得票数 0

3回答

使用箭头键更改按钮的焦点

、、、、

我正在使用JQuery UI对话框创建一个弹出。弹出有两个按钮。第一个按钮由JQuery自动选择。我可以用“选项卡”更改按钮和退出按钮之间的选择。我想改变选择(只在两个按钮之间)，也用键盘上的左右箭头键。谢谢你的帮忙!

浏览 3提问于2014-05-02得票数 2

回答已采纳

3回答

触摸板上的两指滚动js

、、

我们已经开发了一个网站，其中with具有水平方向，并希望实现触摸板控制与两个手指左右移动。如何使用js或jQuery将触摸板控件从上/下移动到左/右，以向左/右滚动站点页面？

浏览 10提问于2012-04-02得票数 5

2回答

不允许文本框中的十进制和字母表值

、、、

我想重新选择文本框中的十进制和字母值。我只想在文本框中输入数字。也不要复制粘贴文本和十进制值。不要只输入数字(0 0 9)。如何使用javascript o jquery的regex实现此操作。我不能左右移动，如果我给(shift+home)或(shift + end)，它不会选择值。

浏览 5提问于2016-03-04得票数 2

回答已采纳

1回答

带有右左键的jQuery水平自动滚动器

、、

我使用了以下jquery来使用鼠标滚动器对内容进行水平滚动：现在我想用键盘的左右键实现这个水平滚动，但是我不知道怎么做！

浏览 6提问于2013-11-14得票数 0

回答已采纳

1回答

同时将div滑入和滑出页面视图

、、、、

浏览 3提问于2012-06-15得票数 1

回答已采纳

4回答

为什么:排在最后的孩子没有给我我期望的结果？

、、

jsFiddle地址：基本上，当文档准备就绪时，只有10行左右的表不会被隐藏。我想要最后一个非隐藏行的索引，但是我的jQuery选择器让我失望了。

浏览 5提问于2012-02-14得票数 1

回答已采纳

1回答

灯箱背景效果

我刚刚开始学习jQuery，我不确定如何启用类似于灯箱的背景效果。我希望我的<div> (注册向导)以100%的不透明度出现，我希望它后面的所有东西都在50%左右的不透明度和不可点击的地方。如何使用jQuery实现这一点？

浏览 1提问于2012-06-22得票数 2

回答已采纳

2回答

使用原型Javascript框架搜索具有特定文本的节点

、、

原型Javascript库是否有一个与jQuery的等价的选择器？如果不是，选择器/筛选器的“原型方式”是什么--向下列出包含特定字符串的元素列表。例如，使用以下内容我可能会得到一个50左右的链接数组。我只想要包含工作‘主页’的链接。在jQuery我会这么做是否有可能使用原型来做类似的事情

浏览 4提问于2010-06-09得票数 2

回答已采纳

4回答

带下拉菜单的datepicker可持续数月和数年

、、、

在jQuery 中有一个内置的日期选择器，但它的问题是我不能将它用于像出生日期这样的字段，因为它没有年和月的组合框，所以人们必须单击很多次才能回到1980年左右。参见图：有没有带下拉菜单的免费日期选择器，或者我是否可以用参数更改这个日期选择器？

浏览 0提问于2013-07-21得票数 2

回答已采纳

1回答

如何在Chrome浏览器上利用即将过时的方法来处理jQuery？

、、、、

我有一些NPM，它们的依赖项使用jQuery对SVG元素进行选择。下面是当我的NPMs使用jQuery进行SVG选择时收到的警告。“SVGElement.offsetWidth”被废弃，并将在2016年4月左右在M50中被删除。有关更多详细信息，请参阅。locuslabs.js:6635 'SVGElement.offsetHeight‘已被否决，并将在2016年4月左右在M50中被删除。有关更多详细信息，请参阅。下面是创建此特定警告的jQuery代码部分。问

浏览 1提问于2016-02-08得票数 3

1回答

jQuery左右键滚动

、、

几天来，我一直在努力想办法解决这个问题，但似乎没有取得任何进展。我试图做一个简单的左和右滚动使用图像作为滚动，但我似乎无法使它工作。这是我的代码：<div class="outerwrapper"> <div class="productsbox"> <img class="box_image" src="images/productsbox1.png" style=

浏览 0提问于2013-08-29得票数 0

回答已采纳

1回答

Jquery SerialScroll:左右连续

、、、

我想知道是否有人能帮我..我一直在到处寻找一种适合我需要的卷轴。我想要能够做一个滚动条，连续向左和向右滚动，只要左或右按钮是按下(使用onmousedown)。Ariel Flesler ( if SerialScroll的创建者)在他的博客上写了一篇关于的文章，其中他描述了如何制作连续的滚动，以及如何从左向右滚动。然而，他还没有描述如何将这两者结合起来。

浏览 1提问于2010-09-20得票数 0

2回答

web应用程序最好的大容量本地存储选项是什么？

、、、、

我正在使用jquery mobile构建一个web应用程序，它将有许多需要缓存以供离线访问的图像，我正在寻找实现这一点的最佳方法。总存储容量可能需要15-20MB左右。这方面有没有好的选择？此外，我没有太多的网络应用程序的经验，所以任何例子，你可以提供将是伟大的。

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

回答已采纳

2回答

JCrop和PHP用黑条返回图像

、、、、

因此，我使用的是最新版本的JCrop和最新版本的JQuery。我的目标是允许用户上传大于550x550px的图像，然后选择不大于550x825px的方形或纵向选择。我的实现是将上传的图像调整为文件大小，即550x550+或550+x550，这取决于最初上传时x或y是否较大。当新映像存储在我的服务器上时，它的代码工作得非常好。我遇到的问题是，当调用裁剪代码时，除非作物选择的起始坐标为0，否则返回的图像将向上移动，似乎与开始坐标成比例，而图像的其余部分将是黑色空间。我试图包括图像演示，但不允许，因为我仍然是

浏览 2提问于2016-05-07得票数 0

回答已采纳

2回答

ModalPopUp不会在按钮单击时隐藏

、、

使用RadioButtonList选择输入数据的选项，其中之一是AJAX ModalPopUp中的网格视图。当用户单击ModalPopUp中的按钮时，ModalPopUp需要隐藏。

浏览 1提问于2014-08-10得票数 0

1回答

HTML/JQUERY表单选择选项指定起点

、、、

我正在使用jquery脚本在表单上创建一些自定义样式的选择框，jquery脚本在这里：。(这个问题实际上与jquery脚本无关，但我认为应该包括它。)我有一个选择(下拉)的形式，其高度从1英尺到6英尺。默认情况下，第一个选项是1英尺，但我希望从5英尺左右开始，因为这是一个更常见的选择。我仍然想保持向上滚动和向下滚动选项的能力，以便从最小到最高。“选择”不会产生我正在寻找的结果。有人知道怎么让这件事起作用吗？</select> 这个

浏览 1提问于2013-01-24得票数 0

1回答

JQuery链选择实现

、、、

就JQuery、AJAX和PHP而言，我是个新手，我正在尝试构建一个带有链式选择的表单，该表单将为一个新的mysql提供初始数据。我已经下载了JQuery链接的select远程插件，对于我的生活，我不知道如何获得第二个select下拉列表返回的数据。第一个下拉列表使用另一个函数填充，当用户从该下拉列表中选择一个值时，我希望将该值用作第二个下拉列表的搜索字符串。主窗体的代码片段是： <?/js/jquery-1.7.2.min.js"></scrip

浏览 8提问于2012-06-12得票数 2

点击加载更多