Question

我只是设置了以下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>

Answer 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可以像第一个函数一样处理。从本质上讲，您可以动态获取要使用的索引。

Answer 2

我用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）在onmouseover：

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

比在JavaScript中循环更快。

Answer 3

尝试这样的事情：

$(".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")您正在寻找

的祖先。然后在该父级中找到该类。你不需要迭代。

循环遍历多个PHP生成的DIV，并在悬停时显示/隐藏

3 个答案: