Maison >interface Web >js tutoriel >Explication détaillée de la façon d'échanger les positions des boutons dans deux divs à l'aide de jQuery

Explication détaillée de la façon d'échanger les positions des boutons dans deux divs à l'aide de jQuery

小云云original: 2017-12-27 11:12:482975parcourir

Cet article présente principalement l'exemple de code d'utilisation de jQuery pour réaliser l'échange de positions de boutons dans deux p. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

L'effet est le suivant

Explication détaillée de la façon déchanger les positions des boutons dans deux divs à laide de jQuery

Le code est le suivant :

<head>
 <meta charset="utf-8" />
 <title></title>
 <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
 <script type="text/javascript">
  $(function() {
   //定义一个变量等于所有button按钮
   var btns = $("button");
   //for循环进行遍历 
   for(var i = 0; i < btns.length; i++) {
    //i控制他的下标确定的是那个按钮的点击事件
    btns[i].onclick = function() {
     //判断如果此按钮的父控件是p1
     if($(this).parent().is("#p1")) {
      //移除此按钮
      $(this).remove();
      //转移到p2
      $(this).appendTo("#p2")
     } else {
      //否则他的父控件是p2 那么就把他移动到p1
      $(this).appendTo("#p1")
     }
    }
   }
  });
 </script>
</head>
<style>
 p {
  width: 500px;
  height: 200px;
  border: 1px;
  background-color: beige;
 }
 button {
  width: 50px;
  height: 30px;
 }
</style>
<body>
 <p id="p1">
  <p>我选择的：</p>
 </p>
 <p id="p2">
  <p>还可以选：</p>
  <button>数学</button>
  <button>英语</button>
  <button>体育</button>
  <button>美术</button>
  <button>物理</button>
  <button>啦啦</button>
  <button>化学</button>
  <button>历史</button>
  <button>地理</button>
  <button>生物</button>
 </p>
</body>

Recommandations associées :

Explication détaillée des valeurs des boutons radio, des boutons à cocher et des listes déroulantes dans les balises de formulaire Vue.js

Code d'implémentation HTML pour l'ajout d'indices de quantité sur les boutons de message

Problème JS de définition de fonctions anonymes pour les boucles de boutons

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple détaillé de jQuery Ajax utilisant Token pour vérifier l'identitéArticle suivant：Exemple détaillé de jQuery Ajax utilisant Token pour vérifier l'identité

Articles Liés

Voir plus