Показать шестнадцатиричный код на странице load

Question

Правильный рабочий код можно увидеть в ответах. Конечный результат: 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> 

На данный момент сценарий требует от пользователя мыши на Lī блок для шестнадцатеричного кода для отображения. Я хочу, чтобы он сразу показывал .

Возможно ли это? Если да, то как?

Спасибо, ребята!

Answer 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') + '" />'); 
    }); 
}); 

fiddle

Существовали много ошибок в коде. Вы не выбрали правильный класс для UL. Также UL элементы не могут содержать span элементов.

Также использование элемента проверки показало бы, что код выполняет то, что он ему сказал, и помещает ## перед цветом.