input标签值的交换-扩展

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具和关键技术：Visual Studio 2015，JavaScript

作者：金建勇

撰写时间：2019年5月23日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

在一个项目中总会有很多很多的小功能，可能代码不是很多，但是需要你去理解。下面要说的也算是一个小功能，就是实现两个input标签之间值的交换，可能这样说的不会很清楚，下面就直接看例子吧。

 

1、首先还是先布局好页面，代码如下图所示：

简单的放了两个input标签何一个button按钮，再给它们各自的id，为了后面写JS代码需要，效果如下图所示：

2、将页面布局好可以开始写JS代码了，代码如下图所示：

可以看见图中代码很简单，看完也很容易理解，就是一个按钮的点击事件中，分别获取了两个input标签的值，再给它们赋值，赋值的时候就是交换值。

效果如下图所示:

先是给两个input标签都输入值，再点击交换按钮，就实现了值的交换，如下图所示：

可以看到两个input标签的值就进行了交换，以上内容就简单的实现了两个input标签之间值的交换。

上面只是简单的一个例子，方便大家理解。下面就再来看看扩展：

直接看代码，如下图所示：

 

还是简单布局，可以看到和上面的布局是差不多的，不一样的地方就是换成了select标签，

换成select标签后，你再照着上面的JS代码写你会发现实现不了效果，这个时候，就需要换一种写法，代码如下图所示：

将val()换成html()，就不是获取值，而是获取它们的html内容，再让它们html内容进行交换，效果如下图所示：

这样就又实现了select标签值的交换，学会理解这样的小功能在做项目的时候也会有帮助。