Home > Developer > Web Develop
Tag: action button INPUT element for condition query Note end
There are 2 buttons A and B on the page. Click the button A and button B to swap positions, click button B and the button a interchange position. How should it be implemented?
The HTML code is as follows:
<Body> <!--There are 2 buttons A and B on the page. Click on the button A and button B to swap positions click Button B and button a interchange position - <inputtype= "button"value= "button A"ID= "a"/> <inputtype= "button"value= "button B"ID= "B"/> </Body>
The basic idea should be to add the Click event to button A and button B respectively, and change the position when the click occurs. But the main problem is that the position of the button is not fixed. So when using InsertAfter or insertbefore, you need to be aware of where the Click event button is now. There are two ways to solve this problem, and the second way of thinking does not need to consider the position of the button:
The first way of thinking is to judge directly. If the current button is in front of another button, it is inserted behind the other button. (This is implemented using the Append method of the parent node), and if it is behind another button, it is inserted in front of the other button (implemented by the Prepend method of the parent node). So how do you tell if it's behind another button or in front? Using the is method of the JQuery object, the Nextall method is used to get all the elements behind the current button, and the IS method will determine if there are any elements that match the filter criteria. Here is the difference between is and have. is returns the result of the decision, is a Boolean value, The has then returns the element that matches the filter condition, is a jquery Object!! With this idea, the code is as follows:
<script> $(function() { $("#a"). Click (function() {//alert ($x. Nextall (). has ("#b")); The has method returns a 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>
The second way of thinking, the more simple, the difference between button A and button B is thrown away, the actual action is to move the first button in the body to the last (after all, there are only two buttons in the environment of the problem), with this idea, the code amount will be greatly reduced:
<script> $ (function() { $ ("input"). Click (function() { $ ("Body"). Append ($ ("Input:first")); } ); </script>jquery implements two-button position swaps
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
