Question

因此，我有一个个人的prop和values用户详细信息列表，例如height是一个道具，而169cm是一个值。

displaySelectedUser应该在触发DOM事件时接收事件对象，并在powerupTheUI中设置为更改事件侦听器。我设置了getSelectedUser，该ID通过其ID查找用户。我正在使用Object.keys（）方法来获取用户属性的集合。

现在在此displaySelectedUser函数内部，我应该使用.forEach函数数组遍历属性，并在UI中显示属性。因此，例如，给定的属性Age具有对应的span元素，该元素具有data-age-value属性。我建议使用ES6模板字符串来构建针对该属性的span的查询选择器，然后使用它查询DOM。我需要确保仅在DOM查询成功的情况下才更新UI。

js

const users = [];

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

      const displaySelectedUser = (event) => {
        const { target } = event;
        const user = getSelectedUser(target.value);
        const properties = Object.keys(user);
      };



      const letsCalculateBMI = () => {

      };

      const powerupTheUI = () => {
        const button = document.querySelector('#oracle');

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

        select.addEventListener('change', displaySelectedUser);

        button.addEventListener('click',letsCalculateBMI);
      };      

      const displayUsers = (users) => {
        users.forEach(user => {
        const select = document.querySelector('.select-text');
        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'
          },
          {
          age: 23,
          weight: 68,
          height: 6,
          country: 'Nigeria',
          name: 'Simpcy',
          id: 'gibberish'
          }
        );

        displayUsers(users);
      };

      const startApp = () => {
        powerupTheUI();
        fetchAndDisplayUsers();
      };

html

<div class="details mdc-elevation--z3">
      <p>
        <span class="prop" data-age>Age :</span>
        <span class="value" data-age-value>23 years</span>
      </p>
      <p>
        <span class="prop" data-height>Height :</span>
        <span class="value" data-height-value>169cm</span>
      </p>
      <p>
        <span class="prop" data-weight>Weight :</span>
        <span class="value" data-weight-value>68kg</span>
      </p>
      <p>
        <span class="prop" data-gender>Gender :</span>
        <span class="value" data-gender-value>Female</span>
      </p>
      <p>
        <span class="prop" data-country>Country :</span>
        <span class="value" data-country-value>Ghana</span>
      </p>
    </div>

Answer 1

如果我正确理解了您的问题，则可以通过构造查询字符串以匹配与该属性对应的<span>，然后通过{{1}选择该元素，来更新所选用户的属性值的显示}方法，具体情况如下：

document.querySelector()

一旦获取了用户属性的document.querySelector(`.details span[data-${ property }-value]`)元素，您就可以使用所选用户对象中该键的值来更新它的<span>：

innerText

希望有帮助：-）

触发dom时，如何构建事件对象的事件处理函数

1 个答案: