Question

我正在尝试修复以下代码：

const $configuratorMenus = $('.configurators-menu ul li');

$configuratorMenus.click(() => {

    let panelID = $(this).data("id");
    let panelID2 = $(this).attr("data-id");

    console.log(panelID, panelID2);

    //$(`#${panelID}`).slideToggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="configurators-menu">
    <ul>
        <li data-id="shapes">
            <a href="#">
                Shape
            </a>
        </li>
    </ul>
</div>

它不断安慰undefined，我在做什么错？我无法提出任何其他解决方案。

注意：我想通过使用箭头功能解决此问题。

Answer 1

这应该可以解决您的问题-

const configuratorMenus = $('.configurators-menu ul li a');

configuratorMenus.click(function () {
    let panelID = $(this).parent().data("id");
    console.log(panelID);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="configurators-menu">
    <ul>
        <li data-id="shapes">
            <a href="#">
                Shape
            </a>
        </li>
    </ul>
</div>

Answer 2

由于使用的是箭头功能，因此在这种情况下将引用窗口对象。您可以使用e.target。其中e是事件对象。此外，data属性在li上，但是事件起源于a。因此，将$configuratorMenus更改为$('.configurators-menu ul li a')

const $configuratorMenus = $('.configurators-menu ul li a');

$configuratorMenus.click((e) => {
  // get the parent element from the target
  let panelID = $(e.target).parent().data('id');
  console.log(panelID);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="configurators-menu">
  <ul>
    <li data-id="shapes">
      <a href="#">
                Shape
            </a>
    </li>
  </ul>
</div>

jQuery $（this）.data（）返回未定义

2 个答案: