jquery - 获取父 div 的类名并将其用作新 jQuery 函数的选择器

Question

我有一个这样创建的有序列表:

<ol class="custom-counter">
  <div class="row">
    <div class="col-md-4 value-1">
      <li>This is value 1</li>
    </div>
    <div class="col-md-4 value-2">
      <li>This is value 2</li>
    </div>
    <div class="col-md-4 value-3">
      <li>This is value 3</li>
    </div>
  </div>
</ol>

在这个有序列表下面我有一排这样的图片:

<div class="row">
  <div class="col-md-4">
    <img class="value-1" src="img1.png" />
  </div>
  <div class="col-md-4">
    <img class="value-2" src="img2.png" />
  </div>
  <div class="col-md-4">
    <img class="value-3" src="img3.png" />
  </div>
</div>

我想编写一个 jQuery 函数，将悬停监听器绑定(bind)到 li 元素。当用户将鼠标悬停在 li 元素上时，它将查看父 div 的类并将该类用作另一个函数的选择器，该函数将所有带有该类的不透明度设置为 0.4。所以如果我结束 <li>This is value </li>它将设置 img1.png 的不透明度到 0.4。

如果有更好的方法来实现这一点，我也很乐意学习这种方法。谢谢

Answer 1

您的排序列表无效。列表必须有 <li>作为他们的 child 。

更适合您的场景的 HTML 结构是:

<div class="container">
  <div class="row">
    <ol class="custom-counter">
      <li class="col-md-4" data-target="value-1">This is value 1</li>
      <li class="col-md-4" data-target="value-2">This is value 2</li>
      <li class="col-md-4" data-target="value-3">This is value 3</li>
    </ol>
  </div>
  <div class="row">
    <div class="col-md-4">
      <img class="value-1" src="img1.png" />
    </div>
    <div class="col-md-4">
      <img class="value-2" src="img2.png" />
    </div>
    <div class="col-md-4">
      <img class="value-3" src="img3.png" />
    </div>
  </div>
</div>

JQuery

$('.custom-counter li').hover(
  function() {
    var target = $(this).data('target');
    $('img.' + target).fadeTo("slow", 0.4);
  },
  function() {
    $('img').fadeTo("slow", 1);
  }
);

http://codepen.io/partypete25/pen/WwLEwm