Блог

Главная - Вопросы по программированию - Проблема с идентификатором div динамической генерации html

Проблема с идентификатором div динамической генерации html

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Итак, я создаю эту функцию, которая динамически выводит новую «панель» (некоторый фрагмент html). Проблема, однако, в том, что во вновь созданном div отсутствует идентификатор, несмотря на то, что я явно присвоил ему его. Идентификатор должен быть именем с числом, которое увеличивается при каждом создании нового div (name1, name2 и т.д.). Но я не могу заставить div принять идентификатор, который я ему присваиваю. 

 //add panel
  var i = 1; 
        $('#panel').click(function() { 
        $('body').append("<div id='photoContent"   i   "'><h1> Panel </h1><div id='showTable'><h2>add image</h2><div id='table'></div></div></div>").css({
            'margin' : '0px', 
            'padding' : '0px',
            'height' : height, 
            'width' : width,
            'background-color' : 'yellow', 
            'color' : 'rgba(192, 192, 192, .9)',
            'font-family' : 'sans-serif', 
            'font-size' : '40px',
            'text-align' : 'center',
            'border' : '2px solid rgba(192, 192, 192, 1)',
            'border-left-style' : 'none',
            'border-right-style' : 'none'
        }); //close css object literal; 
i  ; }); //end click function

Будем признательны за любую помощь.

Ответ №1:

У вас ошибка в вашем коде.

Это сработает, если вы удалите этот комментарий из кода:

 //some css

Который находится внутри

 .css ({//some css});

Вот рабочий jsfiddle без .css.

Вот рабочий jsfiddle с .css

В чем проблема?

Правая скобка закомментирована, поэтому у вас очень очевидная синтаксическая ошибка, она будет просто выглядеть следующим образом:

  .css ({ uh, oh, no right parenthesis :(

Редактировать

Вы обновили код, удалили комментарий, который вызывал ошибку, ваше решение работает нормально, как показано в этой демонстрации.

Идентификатор должен быть именем с числом, которое увеличивается при каждом создании нового div (name1, name2 и т.д.). Но я не могу заставить div принять идентификатор, который я ему присваиваю.

Если я нажму на панель 2 раза, будет создан следующий html:

 <div id="photoContent1"><h1> Panel </h1><div id="showTable"><h2>add image</h2><div id="table"></div></div></div>
<div id="photoContent2"><h1> Panel </h1><div id="showTable"><h2>add image</h2><div id="table"></div></div></div>

Комментарии:

1. эй, спасибо за ответ, поэтому я должен был выразиться яснее, дело не в том, что html не генерируется, а в том, что генерируемые div-файлы не принимают идентификаторы, которые я назначаю. Я уверен, что проблема не в css, я просто добавил это, поэтому мне не пришлось запутывать код литералом всего объекта.

2. Вы проверили демо, на которое я ссылался? После моего исправления ваш код работает нормально, он создает divs с идентификаторами photoContent1, phontoContent2 и так далее. .css проблема в том, что вы закомментировали правую скобку. Я уверен, что ваша консоль инструментов разработчика скажет вам то же самое.

3. как я уже упоминал, это был не css. Проблема возникла из-за чего-то другого.

4. @nmac Я знаю, что проблема была не в .css, а в комментарии внутри него. Это то, что я улучшаю. В чем проблема сейчас? Он работает с отступом.

5. проверьте обновление вопроса. на этот раз я включил код в том виде, в каком он написан дословно. Как вы можете видеть, никакой css не закомментирован, я сделал это неуклюже только для того, чтобы быстро скопировать и вставить его.