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函数，它将悬停监听器绑定到li元素。当用户将鼠标悬停在li元素上时，它将查看父div的类，并将该类用作另一个函数的选择器，该函数将类的所有内容设置为不透明度为0.4。因此，如果我超过<li>This is value </li>，它会将img1.png的不透明度设置为0.4。

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

Answer 1

您的订购列表无效。列表必须以<li>为孩子。

您的方案的更好的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

Answer 2

我不会为此使用一个类，因为该元素可能有几个类。我会使用数据属性。另外，我会将数据属性直接放在li上，并按照以下方式执行：

＆＃13;

$('[data-target-selector]').hover(function(){
 var target=$(this).data('target-selector');
  
 $(target).css('opacity',0.4);

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ol class="custom-counter">
      <li  data-target-selector=".value-1">This is value 1</li>
      <li  data-target-selector=".value-2">This is value 2</li>
      <li  data-target-selector=".value-3">This is value 3</li>
</ol>


<div class="row">
  <div class="col-md-4">
    <img class="value-1" src="http://placehold.it/350x150" />
  </div>
  <div class="col-md-4">
    <img class="value-2" src="http://placehold.it/350x150" />
  </div>
  <div class="col-md-4">
    <img class="value-3" src="http://placehold.it/350x150" />
  </div>
</div>

＆＃13;

Answer 3

在fiddle

中查看此演示

jQuery函数：

$(document).ready(function(){
  $(".custom-counter li").hover(function(){
        var className = $(this).parent().attr("class");
    var matArr = className.match(/value-\d+/); 
    var mainClass = matArr[0];


    if($("."+mainClass).hasClass("opacityActived")){
        $("."+mainClass).removeClass("opacityActived");
        $("."+mainClass).css("opacity","1");
    }else{
    $("."+mainClass).addClass("opacityActived");
    $("."+mainClass).css("opacity","0.4");
    }


  });
});

Answer 4

这是我为你制作的基本fiddle。看一看。所以基本上，对于你的结构，你想得到父div的类，然后把第二个课拿出来，然后用那个类来做。

$('li').hover(
   function() {
      var thisclass = $(this).parent().attr('class').split(' ')[1];
      $('img.' + thisclass).fadeTo("slow", 0.4);
   },
   function() {
      var thisclass = $(this).parent().attr('class').split(' ')[1];
      $('img.' + thisclass).fadeTo("slow", 1);
   }
);

Answer 5

我要做的是为项添加一个监听器类，并为要更改的项添加关系的数据目标值。正如你所说，你希望改变不透明度，我建议添加一个额外的类来处理这些变化。如果你想用它做其他事情，比如边框等，你可以在同一个类定义中处理它，如下所示：

<ol class="custom-counter">
  <div class="row">
    <div class="col-md-4 hoverlistener" data-targetclass="value-1">
      <li>This is value 1</li>
    </div>
    <div class="col-md-4 hoverlistener" data-targetclass="value-2">
      <li>This is value 2</li>
    </div>
    <div class="col-md-4 hoverlistener" data-targetclass="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>

<style>
   .semi {
      opacity: 0.4;
      filter: alpha(opacity=40); /* For IE8 and earlier */
   }
</style>
<script>
  $("body")
     .on("mouseenter",".hoverlistener",function(){
       var targetClass = $(this).data("targetclass");
       $("."+targetClass").addClass("semi");
     })
     .on("mouseleave",".hoverlistener",function(){
       var targetClass = $(this).data("targetclass");
       $("."+targetClass").removeClass("semi");
     });
 </script>

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

5 个答案: