1

私は、原色用と二次色用の 2 つの入力フィールドがあるものに取り組んでいます。私はJSColorを使用しているので、入力ボックスをクリックするとカラー ピッカーが表示され、色を変更すると入力の背景がその色に変わります。

誰かがフォームを選択できる「既製の」色を使用できる別の機能が必要です。だからここに私が持っているものがあります：

<a id="standardTheme">Standard Theme</a>
<a id="themeTwo">Theme Two</a>

など。そして、私が持っているjQueryは次のとおりです。

$('#standardTheme').click(function() {
    var primaryPicker = new jscolor.color(document.getElementById('primaryColor'), {})
        primaryPicker.fromString('FF0000')

    var secondaryPicker = new jscolor.color(document.getElementById('secondaryColor'), {})
        secondaryPicker.fromString('000000')
});

これは完璧に機能します。themeTwo の場合、そのコード全体を複製し、テーマ 2 に必要な新しい 16 進数の色を手動で入力する必要があります。

選択するテーマが 5 つまたは 6 つあるため、非常に長くなる可能性があります。もっと簡単にコードを改善する方法があり、もっとテーマを追加したいときにもっと短くて柔軟な方法があれば、誰かがコードを改善するのを手伝ってくれるのではないかと思っていましたか?

ありがとうございました！

4

1 に答える 1

3

クリックしているボタンに単純にデータを関連付けてみませんか?

<button class="themeButton" data-primary-color="FF0000" data-secondary-color="000000">Standard</button>

次にjQueryで：

 $('.themeButton').click(function()
 {
     var primaryColor = $(this).data('primary-color');
     var secondaryColor = $(this).data('secondary-color');

     // OR the more verbose way

     var primaryColor = $(this).attr('data-primary-color');
     var secondaryColor = $(this).attr('data-secondary-color');

     // Do your code with the primary and secondary color text
 });

各ボタンの属性を適切に設定する限り、必要な数のボタンを配置することで、必要な回数だけ拡張できます。次に、すべてのボタンでコールバックを共有します。

于 2011-12-13T19:31:17.807 に答える