jQueryの1つのコントローラでさまざまな要素のさまざまなプロパティを変更する：正しい方法ですか？

Question

jQueryセレクタがついているようです。

私は、例えば、colorample要素のcss色値とvalue要素のhtmlを変更するコントローラを1つ持っていたいと思います。ページには、このように書きます：

<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のコードは...まあ、私は私がこだわっているので、この例の1の作業はありません。このページの前のバージョンはテンプレートエンジンで生成されていたので、各要素に固有の名前が付いていました。コントローラーごとに独自の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

OKは、まさにこのような状況で、私は次のようでした：

Class属性は、要素の機能を定義します。コントローラは、サンプル、カラーピッカーのウィジェットを呼び出すためのものです（私は色が異なる文脈でどのように機能するかを示すために、これらのいくつかの異なるがつきます）それがどのように見えるかを表示するためのもので、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); 
} 

もしそれほど間違っていないなら、私はこれを受け入れます。そうであれば、私はコードを書き直して理由を説明した修正を受け入れます。