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 ...
随机推荐
- CentOS7安装配置redis-3.0.0
一.安装必要包 yum install gcc 二.linux下安装 #下载 wget http://download.redis.io/releases/redis-3.0.0.tar.gz tar ...
- Ubuntu 安装java环境搭建
1.下载JDK 8从http://www.oracle.com/technetwork/java/javasebusiness/downloads/选择下载JDK的最新版本 JDK 8. 2.解压文件 ...
- python简单爬虫示例
#coding=utf-8 import urllib import re def downloadPage(url): h = urllib.urlopen(url) ret ...
- 《Linux内核分析》第六周 读书笔记
<Linux内核设计与实现>CHAPTER3阅读梳理 [学习时间:3hours] [学习内容:进程的描述:进程的生命周期(包括创建.终结)] 一.进程(任务)描述 1.进程是处于执行期的程 ...
- vi基本命令
http://www.cnblogs.com/younggun/p/3190820.html 要记得经常练习
- Sql Server Express连接字符串
data source=.\SQLEXPRESS;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\ASPNETDB.MDF;User ...
- iOS中的#ifdef DEBUG为什么会在didFinishLaunchingWithOptions之前执行
#ifdef DEBUG ...程序段1... #else ...程序段2... #endif 这表明如果标识符DEBUG已被#define命令定义过则对程序段1进行编译:否则对程序段2进行编译.#i ...
- EBS创建相应的用户
登陆EBS,依次点击"System Administrator"-->"Security"-->"User"-->&quo ...
- NSCalendar NSDateComponents
// NSCalendar // 获取当前日历 NSCalendar *calendar = [NSCalendar currentCalendar]; // 获取当前时间日期的各个值 NSDate ...
- 决策树Decision Tree 及实现
Decision Tree 及实现 标签: 决策树熵信息增益分类有监督 2014-03-17 12:12 15010人阅读 评论(41) 收藏 举报 分类: Data Mining(25) Pyt ...