0

我需要为页面上的多个元素复制此功能，我可以通过重复该功能并更改类名来实现它，但是有没有更简单的方法来组合多个实例或更改类名？在样式表中，当链接滚动时，我会为每个图像的标题设置动画。

功能：

 $("a.link1").hover(function() {
  $(".img1, .img1over").toggleClass("img1 img1over");
});
$("a.link2").hover(function() {
  $(".img2, .img2over").toggleClass("img2 img2over");
});

的HTML：

<div id="nav">
<ul>
<li><a href="#" class="link1">link1</a></li>
<li><a href="#" class="link2">link2</a></li>

</ul>
</div>

            <div class="main">
                <div class="grid img1">
                    <img src="1.jpg" />
                    <div class="mask">
                        <h2>title</h2>
                    </div>
                    </div>

                    <div class="grid img2">
                    <img src="1.jpg" />
                    <div class="mask">
                        <h2>title</h2>
                    </div>
                    </div>

        </div>
4

4 回答 4

1

首先，您需要一个用于所有链接的通用类来简化您的代码。

的HTML

<div id="nav">
<ul>
    <li><a href="#" class="link" id="link1">link1</a></li>
    <li><a href="#" class="link" id="link2">link2</a></li>
</ul>
</div>
<div class="main">
                <div class="grid img1">
                    <img src="1.jpg" />
                    <div class="mask">
                        <h2>title</h2>
                    </div>
                    </div>

                    <div class="grid img2">
                    <img src="1.jpg" />
                    <div class="mask">
                        <h2>title</h2>
                    </div>
                 </div>
 </div>

功能

$('.link').hover(function() {
    var id = $(this)[0].id.substring(4);
    $(".img"+id).toggleClass("img"+id+" img"+id+"over");
});

现在您可以使用链接类和 id link+number 来创建任意数量的链接，它们将引用相应的 img+number。

于 2012-06-01T16:35:30.370 回答
0

如果您使某些类/ID组合对应，那么您可以编写一次：

<a href="#" id="link1" class="hover-link">yep</a>
....
<div id="link1-container">
...
<img src="" class="link-image" />
...
</div> 

$('.hover-link').hover(function(e){
   var $this = $(this),
       baseId = $this.attr('id'),
       $img = $('#'+baseId+'-container .link-image');

       if($img.length > 0) {
          $img.toggleClass('the-class-name');
       }
});
于 2012-06-01T16:31:43.990 回答
0

我可能会这样：

$("#nav a").hover(function() {
    var num = $(this).attr('class').replace('link', '');
    // OR
    // var num = parseInt($(this).attr('class'), 10);

    $(".img" + num).toggleClass("img" + num + "over");
});​

我知道您也在切换img课程，但我建议您改写您的 css。您也可以关闭父级的索引，<li/>而不是清除类名

于 2012-06-01T16:33:28.723 回答
0

这确实是一个奇怪的案例，但如果你想坚持你的 HTML 和这样做的方式 - 我会为此制作一个简单的插件。

http://jsfiddle.net/hkdobrev/8NS89/1/

$.fn.toggleHoverClass = function( selector1, selector2 ){
    return this.hover(function(){
        var index = $( this ).parent().index() + 1,
            class1 = selector1 + index,
            class2 = class1 + selector2;
        $( '.' + class1 + ', .' + class2 ).toggleClass(class1 + ' ' + class2);
    });
};

$(function(){
    $( '#nav' ).find( 'a.link' ).toggleHoverClass( 'img', 'over' );
});

​如果有任何问题，请在评论中提问：）

于 2012-06-01T16:53:25.003 回答