Question

好像我被jQuery选择器困住了。

我想让一个控制器更改例如colorsample元素的css颜色值和value元素中的html。该页面如下：

<span class="controller blue">██</span>
<span class="controller red">██</span>

<span class="colorsample red">██</span>
<span class="colorsample blue">██</span>

<span class="hexcolor red">#FF0000</span>
<span class="hexcolor blue">#0000FF</span>

jQuery代码......好吧，我没有为这个例子工作，因为我被卡住了。这个页面的先前版本是使用模板引擎生成的，所以每个元素都有一个唯一的名称，对于每个控制器我都有自己的一段JavaScript，工作得很好，但我认为这很愚蠢，并且有这样的双重类似乎对我来说是一个好主意，但现在我无法绕过选择它们，我正在尝试这样的事情：

$("span.control").click(function(){
get an element which has the same class as this one, but not entirely, goddamit!
});

所以我觉得我在这里做了一些非常错误的事情，制作这种页面的好方法是什么？我不需要详细的代码，只需要一个大方向就可以了。

编辑：我想保留这些丑陋的符号，因为该页面是关于虚假界面的。

Answer 1

使用this获取类列表，并找到包含您正在查找的一个类的控件。

之后，您可以使用类似于$(".hexcolor ." + colorName).val();的选择器获取颜色并将其添加到元素“css中。

Answer 2

好的，就在这种情况下，我做了以下事情：

类属性定义元素的功能：控制器用于调用颜色选择器小部件，示例（我将其中几个不同的颜色显示颜色在不同的上下文中如何工作）用于显示它的外观和hexcolor用于显示颜色的RGB代码人们在他们的配置中使用。

Name属性确切地定义了需要使用控制器更改的颜色，如此。

<span class="controller" name="red">██</span>
<span class="controller" name="blue">██</span>

<span class="colorsample" name="red">██</span>
<span class="colorsample" name="blue">██</span>

<span class="hexcolor" name="red">#FF0000</span>
<span class="hexcolor" name="blue">#0000FF</span>

所以我在JavaScript中进行字符串处理，但它不是数组拆分，它是琐碎的连接，如下所示：

//getting name
var myName = $(this).attr("name"); 
//making a selector for sample
var sampleSelector = "\'span[class=\"sample\"][name=\"" + myName + "\"]\'";
//making a selector for hexcode
var hexColorSelector = "\'span[class=\"hexcolor\"][name=\"" + myName + "\"]\'";

这些可以在以后的多个属性选择器中使用，这里它作为颜色选择器小部件的选项：

onChange: function (hsb, hex, rgb) { //that's from widget docs
     $(sampleSelector).css('color', '#' + hex);
     $(hexColorSelector).html('#' + hex);
}

如果不是非常错误，我会接受这个。如果是的话，我会重写代码并接受修正并解释原因。

使用jQuery中的一个控制器更改各种元素的各种属性：正确的方法？

2 个答案: