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 ...
随机推荐
- JSON和JS对象之间的互转（转）
文章出处:http://www.cnblogs.com/dyllove98/p/4235909.html 1. jQuery插件支持的转换方式 $.parseJSON( jsonstr ); //jQ ...
- 关于JavaScript的判断语句（1）
if语句: if( 判断条件 ){ 判断结果为true执行语句: } if...else语句: if(判断条件){ 判断结果为true时执行的语句: }else{ 判断结果为false时执行语句: } ...
- [开源]基于STM32的录音播放装置
这是帮一个同学做毕设做的,基本要求如下(有些指标看看就好,实际当然不需要,哈哈): (1)放大器1的增益为46dB,放大器2的增益为40dB,增益均可调:(2)带通滤波器:通带为300Hz-3.4kH ...
- JSP中的隐式对象（implicit object）
- JSP和Server的相互转化
[设计想法] [前置条件] 1. eclipse的web环境已经搭建OK 2. eclipse已经存在web项目"firstweb" [操作步骤] 1. "firstwe ...
- Nhiberate (三)测试
(一)添加数据: public void AddUser(User user) { ISession session = NhibernateFactory.GetInstance().GetSess ...
- 对于指定区块div，如何区分区块内的点击 和 区块外的点击？
需求:对于区块div内点击事件, 需要展示区块内的附属操作区块,对于区块外的点击, 需要将前面说的附属操作区块隐藏掉. 分析:对于一般的HTML控件,有标准的js事件接口, focus和blur,来实 ...
- IOS 谓词
// 谓词 Person *person = [[Person alloc]init]; person.name = @"zhang san"; person.age = 20; ...
- jquery通过name，id名称获取当前value值
name是input标签的属性值,jQuery提供了attr() 方法用于设置/改变属性值 $("input:text").attr("name");$(&qu ...
- Microsoft Office Excel 不能访问文件及COM无法访问
Microsoft Office Excel 不能访问文件及COM无法访问 Microsoft Office Excel 不能访问文件“*.xls”. 可能的原因有: 1 文件名称或路径不存在. 2 ...