jQuery realisiert den Shuttle-Box-Effekt

In diesem Artikelbeispiel wird der spezifische Code von jQuery zur Erzielung des Shuttle-Box-Effekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Einführung: Heute werde ich die Realisierung des Shuttle-Rahmens vorstellen

Layoutumsetzung

<div id="box">
  <div id="boxleft">
   <ul id="links_ul">

   </ul>
  </div>
  <div id="boxbtn">
   <button id="btn_right">>>>></button>
   <button id="btn_left">
    <<<< </button>
  </div>
  <div id="boxright">
   <ul id="rechts_ul">

   </ul>
  </div>
</div>

Layoutstil

<Stil>
  * {
   Rand: 0 automatisch;
   Polsterung: 0;
   Listenstil: keiner;
  }

  #Kasten {
   Breite: 500px;
   Anzeige: Flex;
   Inhalt ausrichten: Abstand herum;
   Rand oben: 20px;
  }

  #boxright {
   Breite: 200px;
   Höhe: 500px;
   Rand: 1px durchgehendes Dunkelcyan;
  }

  #boxlinks {
   Breite: 200px;
   Höhe: 500px;
   Rand: 1px durchgehendes Dunkelcyan;
  }

  #boxbtn {
   Rand: automatisch;
  }

  #boxbtn-Schaltfläche {
   Breite: 50px;
   Höhe: 200ox;
   Rand oben: 10px;
   Anzeige: Flex;
   Hintergrund: tiefes Himmelblau;
   Cursor: Zeiger;
   Farbe: weiß;
  }

  ul li {
   Höhe: 30px;
   Zeilenhöhe: 30px;
   Rand unten: 2px;
   Textausrichtung: zentriert;
   Hintergrund: dunkelgrau;
  }

  bilden {
   Textausrichtung: zentriert;
  }

  .aktiv {
   Farbe: weiß;
   Hintergrund: dunkelmeergrün;
  }
</Stil>

Code-Implementierung

<Skript>
  lass arr = [
   { "id": 1, "name": "zhang", "check": false },
   { "id": 2, "name": "liu", "check": false },
   { "id": 3, "name": "guan", "check": false },
   { "id": 4, "name": "zhao", "prüfen": true },
   { "id": 5, "name": "ao", "check": true }
  ];

  $("#hinzufügen").klick(Funktion () {
   var name = $("#name").val();
   arr.push({ "name": name });
   zeigeUL(arr);
  })
  $(Funktion () {
   zeigeUL(arr);
  })
  Funktion showUL(arr) {
   var leftstr = "";
   var rightstr = "";
   für(lass i in arr) {
    lass { id, name, prüfen } = arr[i];
    wenn (prüfen) {
     rightstr += `
      <li _id="${id}">${name}</li>
    `
    } anders {
     leftstr += `
      <li _id="${id}">${name}</li>
    `
    }

   }
   $("#left_ul").html(leftstr);
   $("#right_ul").html(rightstr);
  }


  $("#left_ul").on("klicken", "li", Funktion () {
   let index = arr.findIndex((v) => {
    Rückgabewert v.id == $(this).attr("_id");
   })

   wenn ($(this).hasClass('active')) {
    $(this).removeClass('aktiv');
    arr[index].check = falsch;
   } anders {
    $(this).addClass('aktiv');
    arr[index].check = wahr;
   }
  });
  $("#right_ul").on("Klick", "li", Funktion () {
   let index = arr.findIndex((v) => {
    Rückgabewert v.id == $(this).attr("_id");
   })

   wenn ($(this).hasClass('active')) {
    $(this).removeClass('aktiv');
    arr[index].check = wahr;
   } anders {
    $(this).addClass('aktiv');
    arr[index].check = falsch;
   }
  });
  $("#btn_right").klick(Funktion () {
   wenn ($("#left_ul .active").Länge == 0) false zurückgibt;

   zeigeUL(arr);
  })
  $("#btn_left").klick(Funktion () {
   wenn ($("#right_ul .active").Länge == 0) false zurückgibt;
  
   zeigeUL(arr);
  })  
</Skript>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren: