0

私は、次のリンクhttp://fredhq.com/projects/roundabout/で提供されているイメージ ラウンドアバウト プラグインに取り組んでいます。どのリンクをクリックしても問題ありません。正面であろうと後ろであろうと、ラウンドアバウトは前面にスライドしますが、クリックしたばかりの画像のリンクに移動します...したがって、ラウンドアバウトはほとんど役に立たなくなります。

私は jQuery の学習を始めたばかりで、かなりの経験がなく、ここで単純なものが欠けている可能性があると感じています。ラウンドアバウトの正面にある画像だけを、必要なページにリンクさせたいのです。前の画像の後ろにある他の画像をクリックすると、ラウンドアバウトでその画像を前にスイングさせたいだけですが、その画像が前にあるときにクリックでリンクを有効にします

以下は私がこれまでに持っているものです

HTML

<section id="carousel">
<ol class="next">
    <li><a href="http://bandonthewall.org/"><img src="assets/images/carousel-item-1.png"></a></li>
    <li><a href="http://google.com"><img src="assets/images/carousel-item-2.png"></a></li>
    <li><a href="http://bandonthewall.org/"><img src="assets/images/carousel-item-3.png"></a></li>
    <li><a href="http://google.com"><img src="assets/images/carousel-item-4.png"></a></li>
    <li><a href="http://bandonthewall.org/"><img src="assets/images/carousel-item-5.png"></a></li>
    <li><a href="http://google.com"><img src="assets/images/carousel-item-6.png"></a></li>
    <li><a href="http://bandonthewall.org/"><img src="assets/images/carousel-item-7.png"></a></li>
    <li><a href="http://google.com"><img src="assets/images/carousel-item-8.png"></a></li>
    <li><a href="http://bandonthewall.org/"><img src="assets/images/carousel-item-9.png"></a></li>
    <li><a href="http://google.com"><img src="assets/images/carousel-item-10.png"></a></li>
    <li><a href="http://bandonthewall.org/"><img src="assets/images/carousel-item-11.png"></a></li>
</ol>
</section>

Jクエリ

$(document).ready(function() {
      $('ol').roundabout({
         btnNext: ".next",
        enableDrag: true,
      });

   $('a').click(function(e){
        link = $(this).attr("href");
        location.href=link;
    });  });

これについて助けていただければ幸いです

ありがとう

4

1 に答える 1

1

このブロックの代わりに：

$('a').click(function(e){
    link = $(this).attr("href");
    location.href=link;
});

これを試して：

$('.roundabout-moveable-item a').click(function(e){
    if($(this).parent('li').hasClass('roundabout-in-focus')) {
        link = $(this).attr("href");
        location.href=link;
    }
    else {
        e.preventDefault();
    }
});

私が行ったことは、aの親li要素が前にある現在の要素であるかどうかをテストすることです（これはプラグインのクラスによって指定されます.roundabout-in-focus）。そうである場合は、リンクを通過させます。そうでない場合（背後にあるもののいずれかである場合）、リンクがアクティブ化されないようにします。

これが機能するかどうか教えてください。私はプラグインにあまり精通していません。これは迅速な調査に基づいています。それが機能する場合は、上記のブロックのよりスリムな代替バージョンを次に示します。

$('.roundabout-moveable-item a').click(function(e){
    if(!$(this).parent('li').hasClass('roundabout-in-focus')) {
        e.preventDefault();
});
于 2012-07-05T16:01:53.310 に答える