Question

我是jQuery的新手。我必须在段落中的某些链接上执行相同的功能，影响一些图像。

所有链接都有id和img。

这是示例代码：

$("#link1").hover(function () {
    $("#img1").removeClass("hover");
}, function () {
    $("#img1").addClass("hover");
});

$("#link2").hover(function () {
    $("#img2").removeClass("hover");
}, function () {
    $("#img2").addClass("hover");
});

等等。你知道是否有更好的方法来避免每次重写所有项目的相同代码？

Answer 1

使用循环

for (var i=1; i<=2; i++) {
  $("#link" + i).hover(function () {
    $("#img" + i).removeClass("hover");
  }, function () {
    $("#img"+ i).addClass("hover");
  });
}

在不知道HTML结构的情况下，我能提供的最好。

Answer 2

您可以执行以下操作：

＆＃13;

var handler = {
  attr: 'target',
  klass: 'hover',
  in : function() {
    var targetSelector = $(this).data(handler.attr);
    $(targetSelector).addClass(handler.klass);
  },
  out: function() {
    var targetSelector = $(this).data(handler.attr);
    $(targetSelector).removeClass(handler.klass);
  }
};

$('.trigger').hover(handler.in, handler.out);

＆＃13;

div {
  margin: 25px;
}
a {
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid #000;
  border-radius: 4px;
  padding: 5px;
  margin: 5px;
  color: #000;
}
img {
  margin: 5px;
}
.hover {
  box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}

＆＃13;

<div>

  <a href="#" class="trigger" data-target="#img-1">link 1</a>

  <a href="#" class="trigger" data-target="#img-2">link 2</a>

  <a href="#" class="trigger" data-target="#img-3">link 3</a>

</div>

<div>

  <img src="http://dummyimage.com/100x100" id="img-1">

  <img src="http://dummyimage.com/100x100" id="img-2">

  <img src="http://dummyimage.com/100x100" id="img-3">

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

＆＃13;

Answer 3

 [["#link1", "#img1"], ["#link2", "#img2"]].map(function(set){
     $(set[0]).hover(function(){
       $(set[1]).removeClass("hover");
     }, function() {
       $(set[1]).addClass("hover");
     }  
 })

另一个答案显然有点相同。如果你的元素连续编号，它可能会接近最干燥。如果命名更多，那么动态＆＃34;您可以使用上面的内容并添加链接和图像的所有组合。

Answer 4

使用starts with选择器。查找DOM中以ID ='link'开头的所有元素，并使用<img>方法定位相应的replace()元素。

 $(document).find("[id^='link']").hover(function () 
{ 
    $("#" + this.id.replace("link","img")).removeClass("hover");
}, function () {
    $("#" + this.id.replace("link","img")).addClass("hover");
});

http://jsfiddle.net/n95sz5t1/2/

jQuery合并不同的id的功能

4 个答案: