0

複数の Div を親 div に配置して、Dart 言語を使用してカルーセルを実装しようとしています。右ボタンがクリックされたとき、次の div の z-index は、表示されるように前のものより高くなければなりません。すべての div クラス名を arraylist に格納しました。今、誰でもこの仕事を手伝うことができますか?? HTML

<div class="carousel">
  <div class="galleryCars">
  ....
  </div>
  <div class="galleryCars2">
  ....
  </div>
  <div class="galleryCars3">
  ....
  </div>
  <div class="galleryCars4">
  ....
  </div>
</div>

ダーツ

import 'dart:html';
import 'dart:core';
void main(){
    query(".rightArrow img").onClick.listen((e) => cssRightArrow());
    query(".leftArrow img").onClick.listen((e) => cssLeftArrow());
}
cssRightArrow(){
  var carousel = query(".carousel");
  var classList = [];
  carousel.children.forEach(
      (childElement) => childElement.classes.forEach(
          (className) => classList.add(className)
          ));

  /*for (var i = 0; i < classList.length; i++) {                
    var zIndexElem = query(".${classList[i]}");
    var newIndex = int.parse(zIndexElem.style.zIndex ) + 10 ;   
    zIndexElem.style.zIndex = "${newIndex}";
    }*/ //Not Working
}
4

1 に答える 1

2

style.display = 'none'これは代わりに（このユースケースにはあまり適してzIndexいないと思います）を使用した実用的なサンプルです。zIndex

import 'dart:html';

void main(){
  query(".rightArrow img").onClick.listen((e) => cssRightArrow());
  query(".leftArrow img").onClick.listen((e) => cssLeftArrow());
}
cssRightArrow(){
  final elements = query(".carousel").children;

  // looking for the one currently displayed
  final Element current = elements.firstWhere((e) => e.style.display != 'none');
  final currentIndex = elements.indexOf(current);

  // hide current and show next one
  if (currentIndex + 1 < elements.length) {
    current.style.display = 'none';
    elements[currentIndex + 1].style.display = '';
  }
}
于 2013-08-20T12:23:37.267 に答える