Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:9.7.2024 10:35

Potreboval bych prochazet strom v jquery pro nasledny jquery script, ale nedokazi se s tim poprat.

<div class="demoWrapper">
  <nav class="nav">
    <button id="prev" data-increment="-1">Previous</button>
    <button id="next" data-increment="1">Next</button>
  </nav>
  <div class="stage">
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
  </div>
</div>

Celou tuhle strukturu tam mam napr. 4x. Nasledny script pak pracuje s timto kodem (original)

var boxes = $(".box"),
    stage = $(".stage"),
    $nav = $("#nav"); //    upraveno na $nav = $(".nav");

var angle = 360 / boxes.length; // 9 is the number of '.box' elements

TweenLite.set(stage, {
  css: {
    perspective: 1100,
    transformStyle: "preserve-3d"
  }
});

boxes.each(function(index, element) {
  TweenLite.set(element, {
    css: {
      rotationY: index * angle,
      transformOrigin: "50% 50% -247"
    }
  });

  element.dataset.rotationY = index * angle;
});

$nav.on("click", "#prev", function() {

  TweenMax.staggerTo(boxes, 1, {
    cycle: {
      rotationY: function(index) {
        var y1 = +this.dataset.rotationY;
        var y2 = y1 - angle;
        this.dataset.rotationY = y2;
        return y2;
      }
    }
  }, 0);
});

$nav.on("click", "#next", function() {

  TweenMax.staggerTo(boxes, 1, {
    cycle: {
      rotationY: function(index) {
        var y1 = +this.dataset.rotationY;
        var y2 = y1 + angle;
        this.dataset.rotationY = y2;
        return y2;
      }
    }
  }, 0);
});

Zkusil jsem: Vsechno mozne :) Nektere verze...

var $lockes = $(container_id+' .demoWrapper');
var $stages = $(container_id+' .stage');
var $lock = $lockes;
var $stage = $stages;
$stages.each(function(index, element)
{
        var //$stage = $lock.find(".stage"),
            $boxes = $stage.find(".box"),
            $nav   = $lock.find(".nav");

// mirne upraveny puvodni kod
        TweenLite.set($stage, {
          css: {
            perspective: 1100,
            transformStyle: "preserve-3d"
          }
        });

        $boxes.each(function(index, element) {
          TweenLite.set(element, {
            css: {
        //      rotationY: index * angle,
              rotationX: index * angle,
              transformOrigin: "50% 50% -247"
            }
          });

        //  element.dataset.rotationY = index * angle;
          element.dataset.rotationX = index * angle;
        });

        $nav.on("click", container_id + " .prev", function() {

          TweenMax.staggerTo($boxes, 1, {
            cycle: {
              rotationX: function(index) {
        //      rotationY: function(index) {
        //        var y1 = +this.dataset.rotationY;
                var y1 = +this.dataset.rotationX;
                var y2 = y1 - angle;
        //        this.dataset.rotationY = y2;
                this.dataset.rotationX = y2;
                return y2;
              }
            }
          }, 0);
        });

        $nav.on("click", container_id + " .next", function() {

                  TweenMax.staggerTo($boxes, 1, {
                    cycle: {
                      rotationX: function(index) {
                //      rotationY: function(index) {
        //        var y1 = +this.dataset.rotationY;
                var y1 = +this.dataset.rotationX;
                var y2 = y1 + angle;
        //        this.dataset.rotationY = y2;
                this.dataset.rotationX = y2;
                return y2;
              }
            }
          }, 0);
        });
// ---

$lock = $lockes.next();
$stage = $stages.next();
})

// jine pokusy
//var lock = ;
//var $lockes = $(container_id+' .demoWrapper');
//var $lock = $lockes;
//var $stages = $(container_id+' .stage');
//var $stage = $stages;
//console.log($stages);

//for (j=0; j<count; j++, $lock=$lockes.next(), $stage=$stages.next())
//      {
//var lock = container_id+' .demoWrapper';
//var $lockes = $(lock);
//var $stages = $container.children(".stage");
//$lockes.each(function(index, $lock)
//      {
//      var $stage = $(lock+" .stage"),
//          $boxes = $(lock+" .box"),
//          $nav   = $(lock+" .nav");
//      var $stage = $(lock).find(".stage"),
//          $boxes = $(lock).find(".box"),
//          $nav   = $(lock).find(".nav");
//$lock = $lockes[0];
//      var $stage = $lock.querySelector(".stage"),
//          $boxes = $lock.querySelector(".box"),
//          $nav   = $lock.querySelector(".nav");
//      var //$stage = $lock.find(".stage"),
//          $boxes = $stage.find(".box"),
//          $nav   = $lock.find(".nav");
//console.log($stage.length, $stage)

Chci docílit: Snazim se to upravit tak, abych nemusel prilis toho kodu menit a mohl zobrazit 4 takove skupiny. Puvodni kod je delany jen pro jednu.

Puvodni kod je od Jonathana v diskuzi na webce
https://gsap.com/…-like-shape/

Ja chci docilit 4 rotujici valecky na vysku, jako se pouziva pro zamek na jizdni kola.
Ty jo, peru se s tim asi 3h a nemuzu prijit na to, aby mi ten dalsi kod fungoval a nepinfal treba:

$stage.find() neni funkce
$lockes.each se neda pouzit each

Nebo nejake podobne veci. Prave neznam uplne tu jquery syntax. Zkousel jsem tam dat klasicke cykly a pak pouzit pole, ale, pak to pindalo v te casti, do ktere jsem nechtel zasahovat. Aaaa :)

Ja na to prijdu, mozna jen nad tim spatne uvazuji a delam primitivni chybu. Na to prijdu behem par hodin nebo dni, ale treba by nekdo vedel driv.

 
Odpovědět
9.7.2024 10:35
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:9.7.2024 11:04

Ha, tak uz nic, asi sem na to prisel. Sice to jeste nefunguje, jak chci (se muze ukazat, ze to neni dobre reseni :) ), ale problem s elementy jsem, zda se, vyyresil. Stacilo to sem napsat a trochu vic zapremyslet :)

var $lockes = $(container_id+' .demoWrapper'); // tohle je asi zbytecne pres jquery...
var $stages = $(container_id+' .stage');
$lockes.each(function(index, $lock)
{
            $stage = $lock.querySelector(".stage"), // tady jsem to dal vse pres query selector, takze misto pole {} je to seznam []
            $boxes = $lock.querySelectorAll(".box"),
            $nav   = $lock.querySelector(".nav");
...
//      $boxes.each(function(index, element) {
        for (index=0, element=$boxes[index]; index<$boxes.length; index++) {
...
//      $nav.on("click", container_id + " .prev", function() {
        var prev = $nav.querySelector(".prev")
        prev.onclick = function(event) {
          TweenMax.staggerTo($boxes, 1, { // tady se mozna ukaze, ze boxes musi byt to pole {}
...
//        $nav.on("click", container_id + " .next", function() {
        var next = $nav.querySelector(".next")
        next.onclick = function(event) {
 
Nahoru Odpovědět
9.7.2024 11:04
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:9.7.2024 12:44

ok, takze se ukazalo, ze to nemam vyresene, ze ty funkce precijen vyzaduji jquery-element-object. Chjo.

var $w_list = $('.demoWrapper');
//stage = $(".stage"); // potrebuji z $w ziskat vsechny '.stage', ale musi to byt jquery array
//$stage = $w[0].find(".stage") // cili, jsem predpokladal, ze bude fungovat neco takoveho a vubec
 
Nahoru Odpovědět
9.7.2024 12:44
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:9.7.2024 12:51

Tak, asi reseni uz mam :) Pitome jquery!

var $stages = $wrappers.eq(0).find('.stage');
 
Nahoru Odpovědět
9.7.2024 12:51
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:10.7.2024 15:07

hele, jak mi to pekne funguje :) aspon teda ve FF.
https://mlich.zam.slu.cz/…heel2-pp.htm

 
Nahoru Odpovědět
10.7.2024 15:07
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:14.2.2025 21:47

A víš, že na tohle jquery vůbec není potřeba? To se používalo v době, kdy neexistoval document.query­SelectorAll. Dnes je jquery přežitek, pokud nechceš animace nebo jiné blbosti. A na tu animaci použiješ css.

Editováno
 
Nahoru Odpovědět
14.2.2025 21:47
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:17.2.2025 13:38

Chapu, ale ja tam mam script v jquery pro bubinkovy zamek, viz link. A take jsem psal, ze to potrebuji v jquery array, prave kvuli tomu scriptu, ktery otaci s bubinky. takhle vypada vysledek
https://mlich.zam.slu.cz/…heel2-pp.htm

 
Nahoru Odpovědět
17.2.2025 13:38
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 7 zpráv z 7.