用jQuery中的一個控制器更改各種元素的各種屬性：正確的方法？

似乎我堅持使用jQuery選擇器。用jQuery中的一個控制器更改各種元素的各種屬性：正確的方法？

我想有一個控制器來更改colors元素和html元素的css顏色值。頁面如下所示：

<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! 
});

所以我覺得我做的事情很錯在這裏，有什麼好方法制作這樣的頁面？我不需要詳細的代碼，只是一個大方向會很好。

編輯：我想保留這些醜陋的符號，因爲該頁面是關於僞碼界面。

來源

2012-02-24 Roman Grazhdan

使用'this.className'（這是DOM元素，而不是jQuery）獲取當前元素的類名。然後，用連續的空格（'\ s +'）分割字符串，然後用'，.'將它加入。在這樣做之前，例如，您可能希望刪除不相關的已知類名稱（'「controller」）'。然後，使用'$（string_so_far）'選擇所需的元素。 – 2012-02-24 22:49:44

使用this獲取類的列表，並找到包含您正在查找的一個類的控件。

之後，您可以使用類似於$(".hexcolor ." + colorName).val();的選擇器獲取顏色，並將其放入元素'css。

來源

2012-02-24 22:49:45

OK，只是在這種情況下，我做了以下內容：

類屬性定義元素的功能：控制器是調用的ColorPicker控件，樣品（我搖頭幾個不同的這些展示如何彩色作品在不同的上下文中）是爲了展示它的外觀和hexcolor是爲了顯示人們在其配置中使用的RGB顏色代碼。

名稱屬性定義了需要使用控制器更改哪種顏色，如此。

<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); 
}

如果這不是非常錯誤，我會接受這個。如果是這樣，我會重寫代碼並接受更正並解釋原因。

來源

2012-03-03 13:06:27

用jQuery中的一個控制器更改各種元素的各種屬性：正確的方法？

回答

相關問題