Question

我正在尝试从单击的特定列表元素中获取div ing以使用它执行其他操作。这就是我所拥有的。它不起作用。

CSS

  .ing{
   display:none;
  }

HTML

<ul class="grid">
   <li onclick="openModal()">
      <a href="">
         <img src="" >
         <h3>Easy Crock Pot Recipe</h3>
         <h4>crockpot</h4>
      </a>
      <div class="ing">ingredient</div>
   </li>
   <li onclick="openModal()">
      <a href="">
         <img src="" >
         <h3>Chocolate Chip Cookie Bars</h3>
         <h4>diabetic</h4>
      </a>
      <div class="ing">dough</div>
   </li>
   <li onclick="openModal()">
      <a href="">
         <img src="" >
         <h3>Onion Meatloaf</h3>
         <h4>meatloaf with sauce</h4>
      </a>
      <div class="ing">meatloaf</div>
   </li>
</ul>

Jquery的

<script>
    function openModal() {
        $(this).find(".ing").show();
    }
</script>

Answer 1

您在js代码中使用了错误的引用。更改您的li代码以传递对<li onclick="openModal(this)">等当前元素的引用，然后将您的js函数更改为以下内容

function openModal(that) {
   $(that).find(".ing").show();
 }

当你在这里使用jQuery时，理想情况下你应该从你的html中删除onclick并将你的js代码更改为

$(document).ready(function() {
    $('li').on('click', function() {
        $(this).find(".ing").show();
    });
});

定位列表中的特定类

1 个答案: