配列からアンカーに値を渡しています。これは、クリックされたときに関数を実行する必要があります。 関数
<script type="text/javascript">
function SetOption() {
var hash = window.location.hash.substring(1);
$('#uniform-id span').text(hash);//Changes the text in the dropdown box
$("#select id option:contains(" + hash + ")").attr('selected', 'selected');//Takes the hash and looks for an option that contains that hash
}
</script>
追記機能
$.each(color, function (index, value) {
var anchor=$('<a class="color">').css({
height: '30px',
width: '30px',
'background-color': value
}).attr({
"href": "#" + colorname[index], //append colorname as hash
"onclick": "SetOption();", //run function SetOption when clicked
});
$('#palette').append(anchor);
});
//var columns = $("#palette > a"); this part isn't important for the question.
//for(var i = 0; i < columns.length; i+=16) {
// columns.slice(i, i+16).wrapAll("<div class='column'></div>");
}
サンプル配列
var colorname = [];
colorname [ 0 ] = "color 1";
colorname [ 1 ] = "color 2";
colorname [ 2 ] = "color 3";
colorname [ 3 ] = "color 4";
var color = [];
color[ 0 ] = 'rgb(70,60,65)';
color[ 1 ] = 'rgb(95,58,61)';
color[ 2 ] = 'rgb(79,56,57)';
color[ 3 ] = 'rgb(87,50,65)';
現在、ハッシュがアンカータグに設定される前に関数が実行され、出力 html は次のようになります。
<a class="color" href="#color 1" style="height: 30px; width: 30px; background-color: rgb(70, 60, 65);"></a>
これが機能するには、アンカーの href を最初にする必要があるようです。そうしないと、関数 SetOption を遅らせる必要があります。