0

正しい、機能するコードは、返信で確認できます。最終結果: http://www.creativewebgroup.co.uk/library/colorshareV2/palette/Android

カラー パレット スクリプトを作成しようとしています。

私はこのjQueryスクリプトを持っています:

<script>
//document ready
$(document).ready(function () {
$('.palette-detail li').each(function () {
    $(this).html('<input type="text" style="background: #' + $(this).attr('swatch') +    '" />' );
});
$('.palette-detail').click(function (e) {
    var elem = e.target;
    if ($(elem).is('input')) {
        $(elem).val($(elem).parent().attr('swatch'));       
    }
   });
});

使用される HTML の基本的な考え方を次に示します (ただし、スクリプトでは PHP 駆動です)。

<ul class="palette">
<li swatch="#FFFFFF">
<li swatch="#FFFFFF">
<li swatch="#FFFFFF">
<li swatch="#FFFFFF">
<li swatch="#FFFFFF">
<span><a href="palette/URL">Title</a></span>
</ul>

現時点では、16 進コードを表示するには、スクリプトでユーザーが li ブロックをクリックする必要があります。代わりにすぐに表示したい。

これは可能ですか？もしそうなら、どのように？

みんなありがとう！

4

1 に答える 1

1

HTML

<ul class="palette">
<li swatch="#4362ff">
<li swatch="#ee3d5f">
<li swatch="#FFFFFF">
<li swatch="#FFFFFF">
<li swatch="#FFFFFF">

</ul><span><a href="palette/URL">Title</a></span>

jQuery

     //document ready
$(document).ready(function () {
    $('.palette li').each(function () {
        $(this).html('<input value='+$(this).attr("swatch")+' type="text" style="background: ' + $(this).attr('swatch') + '" />');
    });
});

フィドル

コードに多くの間違いがありました。UL の正しいクラスを選択していません。またUL、要素に要素を含めることはできませんspan。

また、inspect 要素を使用すると、コードが指示どおりに実行され、色の前に ## が付けられることが示されます。

于 2013-06-08T13:33:06.867 に答える