Question

是一个新手，正在挑战我被困住了。下面是问题

创建一个getSelectedUser箭头函数。它应该带有一个userId参数，并在users集合上使用Array.find函数来查找并返回所选的用户对象。 .find调用应使用一个内联箭头函数，并对其参数进行解构以获取Users数组中的id属性。

displaySelectedUser是事件处理程序，我需要将所需的事件参数解构为目标属性的函数。

接下来，displaySelectedUser应该调用具有目标的某个特定属性的getSelectedUser，该属性表示更改事件中SELECT元素的选定值。最后，将.getSelectedUser调用的结果分配给用户变量。

接下来，使用Object.keys（..）获取用户属性的集合。将其分配给属性变量。

使用数组.forEach函数遍历属性，然后在UI中显示属性。诸如* Age的给定属性具有一个带有data-age-value属性的对应SPAN元素。您可以使用ES6模板字符串构建针对该属性的SPAN的查询选择器，然后使用它查询DOM。您还希望确保仅在DOM查询成功后才更新UI

这是我的代码

 const users = [];

  const getSelectedUser = (userId) => {

    return users.find(({id}) => id === userId);
  };


  const displaySelectedUser = ({event}) => {
     const selectUser = event.target; 
     const value = selectUser.value; 

    getSelectedUser(id); 
  };

  const powerupTheUI = () => {
    document.querySelector('select').addEventListener('change', displaySelectedUser);

    document.querySelector('#oracle').addEventListener('click',  letsCalculateBMI);

  };

  const displayUsers = (users) => {
    users.forEach(user => {
      const select = document.querySelector('select');
      const option = document.createElement('option');

      option.text = user.name; 
      option.value = user.id;
      select.appendChild(option);
    });

  };

  const fetchAndDisplayUsers = () => {
    users.push({
      age: 40,
      weight: 75,
      height: 6,
      country: 'Nigeria',
      name: 'Charles Odili',
      id: 'dfhb454768DghtF'
    });

    users.push({
      age: 40,
      weight: 75,
      height: 6,
      country: 'Nigeria',
      name: 'Peter Odili',
      id: 'gydf4'
    });

    displayUsers(users);
  };

  const startApp = () => {

    powerupTheUI();
    fetchAndDisplayUsers();
  };

  startApp();

Answer 1

根据您的问题，应该这样做。

   const displaySelectedUser = ({target}) => {
      const user = getSelectedUser(target.value);
      const properties = Object.keys(user);
      console.log('props',properties)
      properties.forEach(prop => {
      const span = document.querySelector(`span[data-${prop}-value]`);
          if(span) {
            span.textContent = user[prop];   
          }
      }) 

    }

Answer 2

const displayUsers = (users) => {

        let select = document.querySelector('.select-text');

          users.forEach((user){      

          let option = document.createElement('option');
              option.value = users.id;
              option.innerHTML += user.name;

           select.appendChild(option);

          });
      };

Answer 3

const displaySelectedUser = ({target}) => {
      const user = getSelectedUser(target.value);
      const properties = Object.keys(user);
      properties.forEach(prop => {
        const span = document.querySelector(`span[data-${prop}-value]`);
          if(span) {
            span.textContent= user[prop];   
          }
       })               
    }

这应该可以解决问题，并将您带入下一个阶段

使用数组将预期事件参数解构为仅目标属性。查找方法

3 个答案: