Динамическое создание элемента html и объекта, связанного с ним на каком-либо событии - PullRequest
Новая
       1

Динамическое создание элемента html и объекта, связанного с ним на каком-либо событии

0 голосов
/ 26 мая 2018

1.создать основной объект, который изначально пуст; 2.На каком-то событии, например, клике на кнопке, выполните следующее.3. создать элемент и добавить этот элемент в контейнер (тело html).4. вызвать функцию, которая будет динамически создавать объект для этого элемента.5. хранить свойства элемента, такие как class, в объекте element. 

var main_info = { };
$("button").on("click", function(){
var element = '<div class="class1 class2 class3 class4"></div>';
$("body").append(element);
ele_info(element);
function ele_info(element){
   var info = { };
    info.class_arr = element.classList;
    //how to push info object to main_info object.
   }
 });

Если я нажму кнопку 5 раз, у меня будет 5 элементов в теле.Теперь, если я хочу узнать свойства, скажем, 3-го элемента, как мне выбрать этот элемент и как я должен получить доступ к свойствам объекта элемента?

Ответы [ 2 ]

0 голосов
/ 26 мая 2018

попробуйте этот массив

  1. make main_info, чтобы вы могли выдвинуть информацию.
  2. создать элементы программно, например document.createElement('DIV').
  3. в концесохранить информацию о классе элемента в main_info: main_info.push(element.classList.value.split(' '))
  4. получить доступ к информации 3-го элемента: main_info[2]

код: 

var main_info = [];

$("button").on("click", function(){
  var element = document.createElement('button');
  element.classList = 'class1 class2 class3 class4';
  element.innnerHTML = 'ANYTHING';
  main_info.push(element.classList.value.split(' '));
  $("body").append(element);
  console.log(main_info);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>OK</button>
0 голосов
/ 26 мая 2018

1.создать основной объект, который изначально пуст; 

var main_info = [];

2.На каком-то событии, например, нажатии кнопки, выполните следующее.3.создать элемент и добавить этот элемент в контейнер (тело html). 

$("button").on("click", function() {});

var element = "<div>Here we go</div>";
$("body").append(element);

4. вызвать функцию, которая будет динамически создавать объект для этого элемента. 

function ele_info(elem) {}

5. сохранить свойства элемента, такие как class, в объекте элемента. 

var info = {};
info.class_arr = $(elem).attr('class').split(/\s+/);
main_info.push(info);

Окончательный код будет таким 

var main_info = [];
$("button").on("click", function() {
  var element = "<div>Here we go</div>";
  $("body").append(element);
  var divs = $("div");
  $(divs[divs.length - 1]).addClass("class1 class2 class3 class4");

  ele_info($("div")[$("div").length - 1]);

  function ele_info(elem) {
    var info = {};
    info.class_arr = $(elem).attr('class').split(/\s+/);
    main_info.push(info);
    console.log(main_info);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <button>add</button>
</body>

Также доступ к любому добавленному элементу выглядит так: 

console.log($("div")[2]);

И из массива: 

console.log(main_info[2]);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...