Question

我正在研究JavaScript中的解决方案，该解决方案根据元素上方的元素大小来更改元素的位置。

不幸的是，我正在使用无法处理的外部源代码，这使事情变得困难。

当某人单击列表选项之一时，该框应更改其第一次单击时的位置。但是，一旦用户继续并单击第二个列表选项，所有内容将根据之前单击的选项动态加载，因此包含该列表项的变量不再指向任何内容。

我尝试使用jquery定位变量外部的特定元素，并尝试在click方法上使用函数为该变量分配新值。

$document.ready(function () {
  let option = $('ul li');

  function updateOption() {
    option = $('ul li');
  }

  function changePostion() {
    // changes position based on list choice
  }

  option.on('click', function () {
    changePosition();
    updateOption();
  }
});

<div class="listContainer">

  <!-- so with the below, one of the options from the first UL is selected 
  which will alter the options available in ul two and three -->

  <ul class="optionOne">
    <li>Option</li>
    <li>Option</li>
    <li>Option</li>
  </ul>
  <ul class="optionTwo">
    <li>Option</li>
    <li>Option</li>
    <li>Option</li>
  </ul>
  <ul class="optionThree">
    <li>Option</li>
    <li>Option</li>
    <li>Option</li>
  </ul>
</div>

<!-- This element changes based on the attributes selected above -->
<div class="changedElement"></div>

<!-- This element should therefore adjust position accordingly -->
<div class="newPosition"></div>

理想情况下，我们可以使用某种事件监听器来更改DOM元素的大小，但是我从来没有在库外看到类似的东西，而且令人讨厌的是，在该项目中这不是一个选择。

我真的需要找到一种方法来捕获已重新加载的列表，因为在第一次单击后，无论我首先与哪个用户交互，我的功能都无法正常工作。

真的希望这有意义并感谢您的帮助

需要重新捕获已动态加载的DOM元素

0 个答案: