jQuery实现两个按钮的位置互换
页面上有2个按钮A和B.点击按钮A和按钮B互换位置 ,点击按钮B和按钮A互换位置.应该如何实现?
html代码如下:
<body>
<!--页面上有2个按钮A和B.
点击按钮A和按钮B互换位置
点击按钮B和按钮A互换位置-->
<input type="button" value="按钮A" id="a"/>
<input type="button" value="按钮B" id="b"/>
</body>
基本思路应该是在给按钮A和按钮B分别加上click事件,在点击时候发生位置的改变.但是主要的问题在于:实际上按钮的位置不是固定的..因此采用insertAfter或者insertBefore的时候需要注意现在发生点击事件按钮所处的位置.解决这个问题有两种思路,其中第二种思路不需要考虑按钮的位置问题:
第一种思路是直接进行判断.如果当前的按钮在另外一个按钮的前面,就插入到另外一个按钮的后面去.(这里采用的是父类结点的append方法实现),如果在另外一个按钮的后面,就插入到另外一个按钮的前面(采用父类结点的prepend方法实现).那么该如何判断是在另外一个按钮的后面还是前面呢?采用的是jQuery对象的is方法,先用nextAll方法,获取所有在当前按钮后面的元素,而is方法会判断是否有符合过滤条件的元素.这里要提到is和has的区别.is返回的是判断结果,是一个boolean类型的值,而has则返回的是符合过滤条件的元素,是一个jQuery对象!!有了这个思路,代码如下:
<script>
$(function() {
$("#a").click(function() {
// alert($x.nextAll().has("#b")); has方法返回的是jQuery!!
if($(this).nextAll().is("#b")) {
$("body").append($(this));
}
else {
$("body").prepend($(this));
}
});
$("#b").click(function() {
if($(this).nextAll().is("#a")) {
$("body").append($(this));
}
else {
$("body").prepend($(this));
}
});
});
</script>
第二种思路,则更为简单,把按钮A和按钮B的差异抛开,实际上所要做的操作就是将body中的第一个按钮移到最后面(毕竟,该问题的环境下只有两个按钮),有了这个思路,代码量将会大为减少:
<script>
$(function() {
$("input").click(function() {
$("body").append($("input:first"));
});
});
</script>
jQuery实现两个按钮的位置互换的更多相关文章
- 数据结构学习-数组A[m+n]中依次存放两个线性表(a1,a2···am),(b1,b2···bn),将两个顺序表位置互换
将数组中的两个顺序表位置互换,即将(b1,b2···bn)放到(a1,a2···am)前边. 解法一: 将数组中的全部元素(a1,a2,···am,b1,b2,···bn)原地逆置为(bn,bn-1, ...
- 使用flex布局调换两个按钮的位置
组件用的时antd的Modal组件,里面的按钮需要调换一下位置 今天发现用flex布局非常方便,代码如下: display: flex; justify-content: center; flex-f ...
- 如何调换antd中Modal对话框确认按钮和取消按钮两个按钮的位置
今天有个工作是把所有的确认按钮放在取消按钮的左边,类似于下图这样的,公司用的时antd组件 但是antd组件的按钮时确认键放在右边的 可以采用下面的方式,将按钮调换过来: 对的,就是在modal里面的 ...
- jQuery学习笔记（控件位置定位、尺寸大小的获取等）
想做一个幽灵按钮出来,效果大概如下图: 当点击按钮的时候,会有四根线条从四个方向飞入,经历从“无-有-无”的闪入过程. 那么我的设计想法是,先在HTML中定义一个按钮,然后在jQuery中设计按钮点击 ...
- jquery插件——点击交换元素位置（带动画效果）
一.需求的诞生 在我们的网页或者web应用中,想要对列表中的元素进行位置调整(或者说排序)是一个常见的需求.实现方式大概就以下两种,一种是带有类似“上移”.“下移”的按钮,点击可与相邻元素交换位置,另 ...
- 使用RelativeLayout控制WebView以及Bottom按钮的位置
使用RelativeLayout控制WebView以及Bottom按钮的位置 (地址) 在Design View中加入控件RelativeLayout, WebView, LinearLayout(H ...
- jQuery Mobile 中创建按钮
在 jQuery Mobile 中创建按钮 jQuery Mobile 中的按钮可通过三种方法创建: 使用 <button> 元素 使用 <input> 元素 使用 data- ...
- jQuery滚动条回到顶部或指定位置
jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...
- SDUT OJ 顺序表应用4：元素位置互换之逆置算法
顺序表应用4:元素位置互换之逆置算法 Time Limit: 10 ms Memory Limit: 570 KiB Submit Statistic Discuss Problem Descript ...
随机推荐
- [troubleshoot][archlinux][bcache] 修改linux文件系统 / 分区方案 / 做混合硬盘 / 系统转生大！手！术！（调整底层架构，不！重！装！）
目标: 我要做的事情是:修改文件系统,硬盘分区方案,但是不重装系统,整个操作不被应用层感知. 背景: 我的笔记本 ThinkPad T450.8G内存 + 16GB SSD + 1TB HDD.预装w ...
- 解决ssh登录后闲置时间过长而断开连接
++++++++++++++++++++++++++++ #!/usr/bin/env bash password_5="Uxxx7"host_5="129.x.x.1 ...
- php--数组函数array
1.array_combine array_combine是一种函数,通过合并两个数组来创建一个新数组,其中的一个数组是键名,另一个数组的值为键值.如果其中一个数组为空,或者两个数组的元素个数不同,则 ...
- [LeetCode]题解（python）：114 Flatten Binary Tree to Linked List
题目来源 https://leetcode.com/problems/flatten-binary-tree-to-linked-list/ Given a binary tree, flatten ...
- ORA-01436: 用户数据中的CONNECT BY 循环
起始地 目的地 距离(公里)A B 1000A C 1100A ...
- python的paramiko源码修改了一下，写了个操作命令的日志审计 bug修改
python的paramiko源码修改了一下,写了个操作命令的日志审计,但是记录的日志中也将backspace删除键记录成^H这个了,于是改了一下代码,用字符串的特性. 字符串具有列表的特性 > ...
- Javascript AMD学习
我们知道在其它编程语言中, 都有包(命令空间)的概念, 帮助我们更好的管理代码结构. 如java中的package, python中的module. 但是在js语言中, 在一个页面执行环境内, 所有引 ...
- Comet 反Ajax: jQuery与PHP实现Ajax长轮询
原文地址(http://justcode.ikeepstudying.com/2016/08/comet-%E5%8F%8Dajax-%E5%9F%BA%E4%BA%8Ejquery%E4%B8%8E ...
- ubuntu安装eclipse配置jdk环境
$ sudo mkdir /usr/local/java //在此目录下新建一个文件夹java $ sudo mv 下载/jdk-8u111-linux-i586.tar.gz /usr/local/ ...
- Android studio 查看签名
根据密钥查看 根据安装包查看:改apk为zip 解压 打开 META-INF --->cmd: keytool -printcert -file CERT.RSA