Как получить параметр объекта из элемента li с добавлением - PullRequest
Новая
       2

Как получить параметр объекта из элемента li с добавлением

1 голос
/ 10 июня 2019

У меня есть простые «данные», включая тег li и данные. Затем я добавляю его в тег 'ul'. Я хочу, чтобы каждый тег li мог щелкнуть, чтобы передать свои данные в txtBox.

Я использую 'for loop', чтобы сделать строковое значение для добавления как .. 

datata = '<li onclick = "getset('+ data[i] +')></li>">';

В функции getset я ожидаю, что щелчок будет отправлен для 1 объекта, например ... 

{
   id: 1,
   name: "namename1",
   lname: "imlname1",
   job: "artist",
   ages: "17"
}

Тогда. может использовать значение в объекте, как ... getData.name, getData.job, ... 

function getset(getData){
 getData.name = document.getElementById("txtBox").value;
}

но .. все я получаю только ошибку 'Uncaught SyntaxError: неожиданный идентификатор'

Почему это произошло ?? спасибо 

window.onload = function () {
            data = [
                {
                    id: 1,
                    name: "namename1",
                    lname: "imlname1",
                    job: "artist",
                    ages: "17"
                }, {
                    id: 2,
                    name: "namename2",
                    lname: "imlname2",
                    job: "artist",
                    ages: "25"
                }, {
                    id: 3,
                    name: "namename3",
                    lname: "imlname3",
                    job: "artist",
                    ages: "15"
                }, {
                    id: 4,
                    name: "namename4",
                    lname: "imlname4",
                    job: "artist",
                    ages: "18"
                }, {
                    id: 5,
                    name: "namename5",
                    lname: "imlname5",
                    job: "artist",
                    ages: "27"
                }
            ];
            var datata = '';
            for (let i = 0; i < data.length; i++) {
                datata += '<li onclick="getset(' + data[i] + '  )">' + data[i].name + '</li>';
            }
     
            $("ul").append(datata);
        }

        function getset(data) {
            console.log("1");
            console.log(data);
        }
li {
            border: 1px solid #ddd;
            margin-top: -1px;
            /* Prevent double borders */
            background-color: #f6f6f6;
            padding: 12px;
            text-decoration: none;
            font-size: 18px;
            color: black;
            display: block;
            /* Make it into a block element to fill the whole list */
            position: relative;
}

li:hover {
            background-color: #adadad;
}
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TEST</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
   
</head>

<body>
    

    <input type="search" id="txtBox">
    <ul id="ulTag">

    </ul>

</body>

</html>

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

Ответы [ 7 ]

1 голос
/ 10 июня 2019

Основная проблема заключается в том, что вы пытаетесь добавить объект в строку, и, следовательно, тип приводится по принуждению, и в этом случае необходимые вам данные теряются.

Обходной путь может заключаться всоздайте массив объектов jQuery, которые вы хотите добавить, каждый из которых имеет свой соответствующий объект, хранящийся в атрибуте data элемента, к которому можно легко получить доступ из обработчика делегированных событий, например: 

var datata = data.map(function(o) {
  return $('<li />', { text: o.name }).data('object', o);
}); 

$("ul").append(datata).on('click', 'li', function() {
  console.log($(this).data('object'));
}); 


$(function() {
  var data = [{
    id: 1,
    name: "namename1",
    lname: "imlname1",
    job: "artist",
    ages: "17"
  }, {
    id: 2,
    name: "namename2",
    lname: "imlname2",
    job: "artist",
    ages: "25"
  }, {
    id: 3,
    name: "namename3",
    lname: "imlname3",
    job: "artist",
    ages: "15"
  }];

  var datata = data.map(function(o) {
    return $('<li />', { text: o.name }).data('object', o);
  }); 
  
  $("ul").append(datata).on('click', 'li', function() {
    console.log($(this).data('object'));
  });  
});
li {
  border: 1px solid #ddd;
  margin-top: -1px;
  /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block;
  /* Make it into a block element to fill the whole list */
  position: relative;
}

li:hover {
  background-color: #adadad;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<input type="search" id="txtBox">
<ul id="ulTag"></ul>
0 голосов
/ 10 июня 2019

Рори объяснил причину, по которой ваш код не работает, и обходной путь с jQuery. Вот еще один обходной путь с ванильным JS, который

1) Присоединяет каждое свойство объекта в качестве атрибута данных к каждому элементу списка

2) Добавляет один прослушиватель событий к компоненту <ul> вместо одного на элемент списка для прослушивания событий от его дочерних элементов, когда они всплывают в DOM ( делегирование событий ). 

const data = [{"id":1,"name":"namename1","lname":"imlname1","job":"artist","ages":"17"},{"id":2,"name":"namename2","lname":"imlname2","job":"artist","ages":"25"},{"id":3,"name":"namename3","lname":"imlname3","job":"artist","ages":"15"},{"id":4,"name":"namename4","lname":"imlname4","job":"artist","ages":"18"},{"id":5,"name":"namename5","lname":"imlname5","job":"artist","ages":"27"}];

function handleClick(e) {

  // Destructure the dataset from the event target
  const { target: { dataset: { name, job, ages } } } = e;
  console.log(name, job, ages);
}

// `map`over the data and create an array of list items
const lis = data.map(obj => {
  return (
    `<li
      data-name="${obj.name}"
      data-job="${obj.job}"
      data-ages="${obj.ages}"
     >${obj.name}</li>`
  );
});

// Grab the `ul` element, add the list items to it, and add
// an event listener to listen for click events
const ul = document.querySelector('#ulTag');
ul.innerHTML = lis.join('');
ul.addEventListener('click', handleClick, false);
<ul id="ulTag"></ul>
0 голосов
/ 10 июня 2019

спасибо всем за ответы и спасибо Рори.Я получаю от вас представление.

, которое я понимаю .. если использовать 

datata = '<li onclick = "getset('+ data[i] +')></li>">';

результат равен 

<li onclick = "getset({id: 1,name: "namename1",lname: "imlname1",job: "artist",ages: "17"})></li>">';

, тогда я пытаюсь использовать .. 

datata = '<li onclick="getset(data[' + i + '])">' + data[i].name + '</li>';

команда: .. 

getset(data[0]);

не ... 

getset({id: 1,name: "namename1",lname: "imlname1",job: "artist",ages: "17"});

Это тоже работает, но я все еще не уверен, что это правильный путь.

0 голосов
/ 10 июня 2019

@ savecost просто замените эту строку, она должна работать.

для (пусть i = 0; i " + data [i] .name + ""; }

0 голосов
/ 10 июня 2019

Вы можете использовать литералы шаблона и вам нужно использовать JSON.stringify для передачи объекта в качестве параметра. 

datata += `<li onclick=getset(${JSON.stringify(data[i])})>${data[i].name}</li>`;


window.onload = function () {
            data = [
                {
                    id: 1,
                    name: "namename1",
                    lname: "imlname1",
                    job: "artist",
                    ages: "17"
                }, {
                    id: 2,
                    name: "namename2",
                    lname: "imlname2",
                    job: "artist",
                    ages: "25"
                }, {
                    id: 3,
                    name: "namename3",
                    lname: "imlname3",
                    job: "artist",
                    ages: "15"
                }, {
                    id: 4,
                    name: "namename4",
                    lname: "imlname4",
                    job: "artist",
                    ages: "18"
                }, {
                    id: 5,
                    name: "namename5",
                    lname: "imlname5",
                    job: "artist",
                    ages: "27"
                }
            ];
            var datata = '';
            for (let i = 0; i < data.length; i++) {
                datata += `
                  <li onclick=getset(${JSON.stringify(data[i])})> ${data[i].name}</li>
                `;
            }
     
            $("ul").append(datata);
        }

        function getset(data) {
            console.log("1");
            console.log(data);
        }
li {
            border: 1px solid #ddd;
            margin-top: -1px;
            /* Prevent double borders */
            background-color: #f6f6f6;
            padding: 12px;
            text-decoration: none;
            font-size: 18px;
            color: black;
            display: block;
            /* Make it into a block element to fill the whole list */
            position: relative;
}

li:hover {
            background-color: #adadad;
}
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TEST</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
   
</head>

<body>
    

    <input type="search" id="txtBox">
    <ul id="ulTag">

    </ul>

</body>

</html>
0 голосов
/ 10 июня 2019 
datata = '<li onclick = "getset('+ data[i] +')></li>">';

должно быть: 

datata = '<li onclick = "getset('+ data[i] +')"></li>';
0 голосов
/ 10 июня 2019

Вы вводите в качестве параметра объект. HTML не поддерживает наличие в качестве объектов params. Я исправил твой код:

Вам нужно пройти data[i].id, а не data[i]. 

 for (let i = 0; i < data.length; i++) {
        datata += '<li onclick="getset(' + data[i].id + '  )">' + data[i].name + '</li>';
    }

А затем получить по идентификатору элемент из коллекции: 

 function getset(id) {
                        const match =  data.find(e => e.id === id);
                        console.log('Selection: ', match);
                    }


window.onload = function () {
            data = [
                {
                    id: 1,
                    name: "namename1",
                    lname: "imlname1",
                    job: "artist",
                    ages: "17"
                }, {
                    id: 2,
                    name: "namename2",
                    lname: "imlname2",
                    job: "artist",
                    ages: "25"
                }, {
                    id: 3,
                    name: "namename3",
                    lname: "imlname3",
                    job: "artist",
                    ages: "15"
                }, {
                    id: 4,
                    name: "namename4",
                    lname: "imlname4",
                    job: "artist",
                    ages: "18"
                }, {
                    id: 5,
                    name: "namename5",
                    lname: "imlname5",
                    job: "artist",
                    ages: "27"
                }
            ];
            var datata = '';
            for (let i = 0; i < data.length; i++) {
                datata += '<li onclick="getset(' + data[i].id + '  )">' + data[i].name + '</li>';
            }
     
            $("ul").append(datata);
        }

        function getset(id) {
            const match =  data.find(e => e.id === id);
            console.log('Selection: ', match);
        }
li {
            border: 1px solid #ddd;
            margin-top: -1px;
            /* Prevent double borders */
            background-color: #f6f6f6;
            padding: 12px;
            text-decoration: none;
            font-size: 18px;
            color: black;
            display: block;
            /* Make it into a block element to fill the whole list */
            position: relative;
}

li:hover {
            background-color: #adadad;
}
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TEST</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
   
</head>

<body>
    

    <input type="search" id="txtBox">
    <ul id="ulTag">

    </ul>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...