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 元素可以正常工作。我愿意接受更好的方法来标记两个馅饼之间的差异。

4

4 回答 4

0

您的选择器似乎工作正常。

您看不到 .a3 div，因为某些父 div 具有 ' clip' 或 ' overflow: hidden' 样式。

于 2013-01-09T21:18:52.140 回答
0

这里有一些代码可以满足你的需求（demo）：

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()and <div class="a2">' <div class="a3">。另一种方法是使用图表的颜色来选择这个切片。我还结合了对的调用.css()并将其概括为更简洁的函数。就问题而言，这一切都归结为旋转错误的元素。

于 2013-01-09T21:21:02.560 回答
0

匹配成功就好了，但是你在没有内容的 a2 和 a3 div 上进行匹配，因此 CSS 转换它没有区别。尝试parent()改用：

JS 小提琴演示

我还更新了您的 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

我认为您应该在.pie-element 上而不是在.a2or上进行转换.a3。

将您的选择器更改为：

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