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 ...
随机推荐
- angularJ表单验证
常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" requir ...
- LeetCode Two Sum II - Input array is sorted
原题链接在这里:https://leetcode.com/problems/two-sum-ii-input-array-is-sorted/ 题目: Given an array of intege ...
- LeetCode Palindrome Permutation II
原题链接在这里:https://leetcode.com/problems/palindrome-permutation-ii/ 题目: Given a string s, return all th ...
- 白话学习MVC(九)View的呈现一
一.概述 本节来看一下ASP.NET MVC[View的呈现]的内容,View的呈现是在Action执行之后进行,Action的执行生成一个ActionResult,[View的呈现]的功能就是:通过 ...
- Java 集合的基本用法
package jaxpsax; import java.util.Comparator; import java.util.HashSet; import java.util.Iterator; i ...
- 前向后瞻正则表达式及其JS例子
定义 x(?=y) 匹配'x'仅仅当'x'后面跟着'y'.这种叫做正向肯定查找. 比如,/Jack(?=Sprat)/会匹配到'Jack'仅仅当它后面跟着'Sprat'./Jack(?=Sprat|F ...
- The type XXX cannot be resolved. It is indirectly referenced from required .class files错误.....
遇到The type XXX cannot be resolved. It is indirectly referenced from required .class files错误.....,查找的 ...
- jQuery与其他JS库冲突解决
实际开发中遇到JQuery与其他js库起冲突 究其原因,是它们的全局对象定义冲突了,特别是变量”$”, 可重载$函数.使用jQuery.noConflict()就可以通过重载$函数 例:项目中应用的 ...
- cxf(3.1.1) 异常Caused by: java.io.FileNotFoundException: class path resource [META-INF/cxf/cxf-extension-soap.xml]
Caused by: java.io.FileNotFoundException: class path resource [META-INF/cxf/cxf-extension-soap.xml] ...
- udhcpc命令【转】
udhcpc -i usb0 route 转自:http://blog.csdn.net/hshl1214/article/details/8684740 由于要使用网络通讯,所以不可避免的要用到dh ...