Javascript 通过悬停显示/隐藏循环多个PHP生成的div

我刚刚设置了下面的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:

电影的细节



电影的细节



电影的细节

我使用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中的循环快得多。

我使用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中的循环快得多。

试试下面的方法：

$(".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”）

您正在寻找

的祖先。然后在父级中查找类。您不需要迭代。

尝试以下方法：

$(".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();
});

$(".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();
});

使用

$（this.parents（“li”）

您正在寻找

的祖先。然后在父级中查找类。您不需要迭代

$(".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

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

.movieout

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