1

我刚刚设置了以下 jQuery 代码，它工作正常，但是我觉得它可以用计数器细化成一个更短的循环。我对 jQuery 足够熟悉，知道这是一种可能性，但在语法等方面遇到了困难。谢谢，如果您需要更多细节，请告诉我。

  $(".moviethumb:eq(0)").on("mouseover",
  function () {
    $(".moviedetail:eq(0), .hoverarrow:eq(0)").show();
    $(".moviedetail:eq(1), .moviedetail:eq(2)").hide();
  }
  );

  $(".moviedetail_wrapper:eq(0)").on("mouseleave", 
  function () {
    $(".moviedetail:eq(0), .hoverarrow:eq(0)").hide();
  }
  );

  $(".movieout:eq(0)").on("mouseout", 
  function () {
    $(".moviedetail:eq(0), .hoverarrow:eq(0)").hide();
  }
  );



  $(".moviethumb:eq(1)").on("mouseover",
  function () {
    $(".moviedetail:eq(1), .hoverarrow:eq(1)").show();
    $(".moviedetail:eq(0), .moviedetail:eq(2)").hide();
  }
  );

  $(".moviedetail_wrapper:eq(1)").on("mouseleave", 
  function () {
    $(".moviedetail:eq(1), .hoverarrow:eq(1)").hide();
  }
  );

  $(".movieout:eq(1)").on("mouseout", 
  function () {
    $(".moviedetail:eq(1), .hoverarrow:eq(1)").hide();
  }
  );



  $(".moviethumb:eq(2)").on("mouseover",
  function () {
    $(".moviedetail:eq(2), .hoverarrow:eq(2)").show();
    $(".moviedetail:eq(1), .moviedetail:eq(0)").hide();
  }
  );

  $(".moviedetail_wrapper:eq(2)").on("mouseleave", 
  function () {
    $(".moviedetail:eq(2), .hoverarrow:eq(2)").hide();
  }
  );

  $(".movieout:eq(2)").on("mouseout", 
  function () {
    $(".moviedetail:eq(2), .hoverarrow:eq(2)").hide();
  }
  );

HTML：

<ul class="movies-holder">

<li>

<a href="#">
<div class="movieout"></div>
<div class="moviethumb">
    <img src="theimage.jpg />
    </div>
</a>

<div class="moviedetail_wrapper">
<div class="hoverarrow"></div>
<div class="moviedetail">
<p>The movie details.</p>
</div>

</div>
</li>

<li>

<a href="#">
<div class="movieout"></div>
<div class="moviethumb">
    <img src="theimage.jpg />
    </div>
</a>

<div class="moviedetail_wrapper">
<div class="hoverarrow"></div>
<div class="moviedetail">
<p>The movie details.</p>
</div>

</div>
</li>

<li>

<a href="#">
<div class="movieout"></div>
<div class="moviethumb">
    <img src="theimage.jpg />
    </div>
</a>

<div class="moviedetail_wrapper">
<div class="hoverarrow"></div>
<div class="moviedetail">
<p>The movie details.</p>
</div>

</div>
</li>

</ul>
4

3 回答 3

1 
$(".moviethumb").on("mouseover",
   function () {
      var index = $(".moviethumb").index(this);
      $(".moviedetail, .moviedetail").hide();
      $(".moviedetail:eq(" + index + "), .hoverarrow:eq(" + index + ")").show();
   }
);

$(".movedetail_wrapper").on('mouseleave', function () {
   $(this).find('.moviedetail, .hoverarrow').hide();
});

.movieout可以以与第一个功能类似的方式处理。本质上，您可以获得要动态使用的索引。

于 2013-01-14T19:40:37.267 回答
0

我使用 CSS 解决了这个问题。

1) 给所有 div 一个唯一的 id="movie321"

2）为每个生成CSS规则。

ul.movies-holder li { display: block; }
ul.movies-holder.show320 li.movie320 { display: block; }
ul.movies-holder.show321 li.movie321 { display: block; }

3）在鼠标悬停： 

document.getElementById('movies-holder').className = 'movies-holder show321';

这比在 JavaScript 中循环要快得多。

于 2013-01-14T19:36:34.260 回答
0

尝试这样的事情：

$(".moviethumb").on("mouseover", function() {
    $(".moviedetail").hide();
    $(this).parents("li").find(".moviedetail").show();
});

$(".moviedetail_wrapper").on("mouseleave", function() {
    $(this).parents("li").find(".moviedetail, .hoverarrow").hide();
});

$(".movieout").on("mouseout", function() {
    $(this).parents("li").find(".moviedetail, .hoverarrow").hide();
});

使用$(this).parents("li")你正在寻找的祖先是

  • . 然后在该父级中找到该类。你不需要迭代。

    • 于 2013-01-14T19:38:50.483 回答