1

JQuery CSSメソッドを使用して、スクリプトのローカル変数を使用して、2つの連続するアイテム(円グラフ)を連続して異なる角度に回転させようとしています。以下の名前「a2」と「a3」は、ループ内で動的に生成する必要があります。(JST EJS) これは Javascript です:

var selector1 = ".thermometer .pieSlice1.hold .pie" + " .a2";
var s1 = 'rotate(130deg)';
$(selector1).css({'background-color': 'cyan'});
$(selector1).css({'-webkit-transform': s1});
$(selector1).css({'-moz-transform': s1});
$(selector1).css({'-o-transform': s1});
$(selector1).css({'transform': s1});
var selector2 = ".thermometer .pieSlice1.hold .pie" + " .a3";
var s2 = 'rotate(65deg)';
$(selector2).css({'background-color': 'cyan'});
$(selector2).css({'-webkit-transform': s1});
$(selector2).css({'-moz-transform': s1});
$(selector2).css({'-o-transform': s1});
$(selector2).css({'transform': s1});

HTMLには、これがあります：

<div class="thermometer">
  <div class="circle green">
    <div class="pieSlice1 hold">
      <div class="pie">
        <div class="a2">
        </div>
      </div>
    </div>
  </div>
</div>
<div class="thermometer">
  <div class="circle blue">
    <div class="pieSlice1 hold">
      <div class="pie">
        <div class="a3">
        </div>
      </div>
    </div>
  </div>
</div>

マッチングに失敗するのはなぜですか？Javascript セレクターがいずれの HTML エンティティとも一致しないことがわかりました。なぜだめですか？Jsfiddle はhttp://jsfiddle.net/sploiber/VJHcH/53/です。

編集 - ちょっとした情報を追加するだけです。「a2」と「a3」を削除すると、回転 CSS 要素は正常に機能します。私は、2 つのパイの違いを示すためのより良い方法を受け入れています。

4

4 に答える 4

0

これがあなたが探していることをするかもしれないいくつかのコードです（デモ）：

function rotate(slice, degree) {
  slice.css({
   '-webkit-transform': 'rotate(' + degree + 'deg)',
   '-moz-transform': 'rotate(' + degree + 'deg)',
   '-ms-transform': 'rotate(' + degree + 'deg)',
   '-o-transform': 'rotate(' + degree + 'deg)',
   'transform': 'rotate(' + degree + 'deg)'
  });
}

var selector1 = ".thermometer .pieSlice1.hold .pie" + " .a2";
rotate($(selector1).parent(), 130);

var selector2 = ".thermometer .pieSlice1.hold .pie" + " .a3";
rotate($(selector2).parent(), 65);

それで、ここで何が起こっているかについてのいくつかの説明のために。最初は選択が機能していましたが、実際に回転させたい要素は.parent()と<div class="a2">のでした<div class="a3">。別の方法として、チャートの色を使用してこのスライスを選択することもできます。また、への呼び出しを組み合わせて.css()、よりクリーンな関数に一般化しました。何が悪かったのかというと、それは本当にすべて間違った要素を回転させることに帰着しました。

于 2013-01-09T21:21:02.560 に答える
0

マッチングは問題なく成功しますが、コンテンツのないa2とa3 divでマッチングしているため、CSS変換に違いはありません。parent()代わりに使用してみてください：

JS FIDDLE DEMO

また、ループで動作するようにJavaScriptを更新しました。

var selectors = {
    a2: {
        backgroundColor: 'cyan',
        rotation: 130
    },
    a3: {
        backgroundColor: 'cyan',
        rotation: 65
    }
}

var transformCSS;
for (var elementKey in selectors) {
    transformCSS = 'rotate(' + selectors[elementKey].rotation + 'deg)';
    $(".thermometer .pieSlice1.hold .pie ." + elementKey).parent().css({
        'background-color': selectors[elementKey].backgroundColor,
        '-webkit-transform': transformCSS,
        '-moz-transform': transformCSS,
        '-ms-transform': transformCSS,
        '-o-transform': transformCSS,
        'transform': transformCSS
    });
}
于 2013-01-09T21:21:20.883 に答える
0

あなたのセレクターは正常に動作しているようです。

clip一部の親 div に ' ' または ' overflow: hidden' スタイルがあるため、.a3 div は表示されません。

于 2013-01-09T21:18:52.140 に答える
0

or.pieではなく、要素で変換を行う必要があると思います。.a2.a3

セレクターを次のように変更します。

var selector1 = ".thermometer .pieSlice1.hold .pie" + ":has(.a2)";
于 2013-01-09T21:27:50.323 に答える