Javascript中的动态类名-使用JSFIDLE

我尝试在脚本中使用局部变量，使用jquerycss方法，在一行中获得两个连续的项目（饼图）以旋转到不同的角度。下面的名称“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实体都不匹配。为什么不呢？JSFIDLE是

---

编辑-只是添加一点信息。如果我删除“a2”和“a3”，旋转CSS元素工作正常。我愿意用更好的方法来区分这两个馅饼之间的区别。

你的选择器似乎工作得很好

---

您看不到.a3 div，因为某些父div具有“

clip

”或“

overflow:hidden

”样式

---

因此，对于这里发生的事情的一些解释。首先，select正在工作，但实际要旋转的元素是

和

的

.parent（）

。另一种方法是使用图表的颜色来选择该切片。此外，我还组合了对

.css（）

的调用，并将其推广为一个更干净的函数。就错在哪里而言，这实际上都归结为旋转了错误的元素。

匹配成功得很好，但您在a2和a3 div上进行匹配，这两个div没有内容，因此对CSS转换没有任何影响。尝试改用

parent（）

：

我还更新了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
    });
}

---

我认为您应该在

.pie

-元素上进行转换，而不是在

.a2

或

.a3

上进行转换

将选择器更改为：

---

在

中添加一些文本，然后调用

警报（$（selector2.text（））在脚本的底部，您将看到选择器正在工作。我会看看你的
css（）
calls@JasonSperske，谢谢。如果我没有a2和a3（如果我只是使用“pie”），CSS调用就可以工作。不知何故，a2和a3并不是最好的方法。我完全愿意接受关于如何做得更好的建议。非常感谢！哇！我现在真的很好奇为什么我的另一种方法不起作用，而你的却起作用。我想我还没有完全理解这个函数。看看其他答案，了解有关修复脚本/css的信息。；-）非常感谢。我需要旋转角度保持一个变量，所以我更喜欢另一个答案，但这太棒了。非常感谢你在这方面的工作！
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
    });
}

var selector1 = ".thermometer .pieSlice1.hold .pie" + ":has(.a2)";