javascript - Javascript 中的动态类名 - 使用 jsfiddle

Question

我试图使用 JQuery CSS 方法，使用脚本中的局部变量，连续获取 2 个连续的项目(饼图)以旋转到不同的 Angular 。下面的名称“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 元素就可以正常工作。我愿意采用更好的方法来标记这两个馅饼之间的差异。

Answer 1

这里有一些代码可能可以满足您的需求( 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() <div class="a2">的和<div class="a3"> '。另一种方法是使用图表的颜色来选择该切片。我还将通话合并到 .css()并将其推广为更清洁的功能。就问题所在而言，这实际上都归结为旋转了错误的元素。