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 ...
随机推荐
- http://www.cnblogs.com/ACMer/p/5170255.html
http://www.cnblogs.com/ACMer/p/5170255.html
- 用命令实现SQLServerr的备份与还原
一.备份数据库,命令如下: USE master; GO BACKUP DATABASE mytest TO DISK='E:\disk\mytest.bak' /* mytest为数据库名称,'E: ...
- sql server 中删除表中数据truncate和delete的区别(转载自.net学习网)
我们都知道truncate table可以用来删除整个表的内容,它与delete后面不跟where条件的效果是一样.但除此之外,我们还清楚它们之间有其它的区别吗?本章我们将一起讨论truncate与d ...
- 写在开始编写Java之前（1）——Java的跨平台性
Java语言之所以比C语言更加实用 是有原因的 Java的一个重要的特点——跨平台性 无论是哪个平台,如Windows.Linus还是Mac系统 Java的语法都是一样的 这个要比C语言用处要广 因为 ...
- C# TreeView的CheckBox 父/子节点点击联动选择效果
注: 点击时请正常速度点击,不然会出现“奇怪”现象!!! /// <summary> /// 节点点击 子级->同级->父级 /// </summary> /// ...
- 全网扫描扫描10000端口后的优化脚本&域名列表指定端口的批量测试
方法一: #coding=utf-8 import urllib2 import threading from time import ctime,sleep print "Start-Ti ...
- 免费的网络扫描器-Advanced IP Scanner
软件会自动检测电脑所在的网段,自动决定扫描范围.(例如电脑IP是192.168.1.101,扫描范围就是192.168.1.*) 官方网站:http://www.advanced-ip-scanner ...
- 【001：ubuntu下搭建ESP8266开发环境--编辑 编译 下载】
系统环境:ubuntu 16.04 TLS 64BIT 编辑器: Eclipse CDT 版本 编译器:xtensa-lx106-elf 交叉编译工具链 下载工具:esptool.py pyseria ...
- Java多线程编程——进阶篇二
一.线程的交互 a.线程交互的基础知识 线程交互知识点需要从java.lang.Object的类的三个方法来学习: void notify() 唤醒在此对象监视器上等待的单个 ...
- 三层架构下的EntityFramework codefirst
好久没写博客了,今天研究了EF框架的CodeFirst模式,从字面意思可以看出,代码优先.所谓代码优先,与以往的添加ado.net不同,主要是编写代码生成数据库和数据表,生成数据实体映射.个人感觉这种 ...