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) onmouseover: 

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 に答える