0
Итак, я собираюсь добавлять и удалять много контента на HTML-страницу с относительно сложным стилем и наборами данных, которые будут зависеть от элемента, на который был сделан щелчок. Пример будет выглядеть примерно так ...Добавить HTML на страницу с Javascript + переменными
<li class="foo">
<div class="slider" data-one="foo" data-two="bar"></div>
<img class="thumb" src="img/foo.png" alt="foo" />
<input class="sliderInput" type="number" data-one="foo" min="0" max="240">
</li>
Теперь foo и bar будет определяться на основании изначально щелкнул элемента (почти 100 из них, и очень редко мы увидим более 4-5 на время, поэтому я избегаю писать все это в простом HTML
После некоторых исследований, я собирался сделать что-то вдоль этих линий ... но это было очень грязно, чтобы сделать это:.
function createSlider(foo){
var fooLi = $('<li></li>').addClass(troop);
fooLi.append($('<div></div>').addClass('slider').data('one', foo).data('two', database[troop]["two"]));
fooLi.append($('<img />').attr({
src: 'img/' + foo + '.png',
alt: foo
});
fooLi.append($('<input />').addClass('sliderInput').data('one', foo).attr({
type: 'number',
min: 0,
max: 240
}));
$('#whatever').append(fooLi);
}
Это разумный способ сделать это с помощью jQuery? O r есть ли что-то более эффективное, чего я не вижу здесь?