0

私の最初の質問はこれです。クリックすると関連する div が表示され、残りは非表示になる 5 つの画像があります。これは私がコーディングした方法であり、コーディングが面倒で冗長な方法であると感じています。jQuery を初めて使用するので、アドバイスをお願いします。これが私のコードです：

$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

$('#nav-fragment-0').fadeTo("slow", 1);
    $('#nav-fragment-1').fadeTo("slow", 0.33);
    $('#nav-fragment-2').fadeTo("slow", 0.33);
    $('#nav-fragment-3').fadeTo("slow", 0.33);
    $('#nav-fragment-4').fadeTo("slow", 0.33);

$("#nav-fragment-0").click(function() {
    $('#fragment-0').show();
    $('#fragment-1').hide();
    $('#fragment-2').hide();
    $('#fragment-3').hide();
    $('#fragment-4').hide();


    $('#nav-fragment-0').fadeTo("slow", 1);
    $('#nav-fragment-1').fadeTo("slow", 0.33);
    $('#nav-fragment-2').fadeTo("slow", 0.33);
    $('#nav-fragment-3').fadeTo("slow", 0.33);
    $('#nav-fragment-4').fadeTo("slow", 0.33);


    });
$("#nav-fragment-1").click(function() {
    $('#fragment-1').show();
    $('#fragment-0').hide();
    $('#fragment-2').hide();
    $('#fragment-3').hide();
    $('#fragment-4').hide();

    $('#nav-fragment-1').fadeTo("slow", 1);
    $('#nav-fragment-0').fadeTo("slow", 0.33);
    $('#nav-fragment-2').fadeTo("slow", 0.33);
    $('#nav-fragment-3').fadeTo("slow", 0.33);
    $('#nav-fragment-4').fadeTo("slow", 0.33);

    })
$("#nav-fragment-2").click(function() {
    $('#fragment-2').show();
    $('#fragment-0').hide();
    $('#fragment-1').hide();
    $('#fragment-3').hide();
    $('#fragment-4').hide();

    $('#nav-fragment-2').fadeTo("slow", 1);
    $('#nav-fragment-0').fadeTo("slow", 0.33);
    $('#nav-fragment-1').fadeTo("slow", 0.33);
    $('#nav-fragment-3').fadeTo("slow", 0.33);
    $('#nav-fragment-4').fadeTo("slow", 0.33);

    })
$("#nav-fragment-3").click(function() {
    $('#fragment-3').show();
    $('#fragment-0').hide();
    $('#fragment-1').hide();
    $('#fragment-2').hide();
    $('#fragment-4').hide();

    $('#nav-fragment-3').fadeTo("slow", 1);

    $('#nav-fragment-0').fadeTo("slow", 0.33);
    $('#nav-fragment-1').fadeTo("slow", 0.33);
    $('#nav-fragment-2').fadeTo("slow", 0.33);
    $('#nav-fragment-4').fadeTo("slow", 0.33);

    })
$("#nav-fragment-4").click(function() {
    $('#fragment-4').show();
    $('#fragment-0').hide();
    $('#fragment-1').hide();
    $('#fragment-2').hide();
    $('#fragment-3').hide();

    $('#nav-fragment-4').fadeTo("slow", 1);
    $('#nav-fragment-0').fadeTo("slow", 0.33);
    $('#nav-fragment-1').fadeTo("slow", 0.33);
    $('#nav-fragment-2').fadeTo("slow", 0.33);
    $('#nav-fragment-3').fadeTo("slow", 0.33);

    })


});

クリックされたナビゲーション用の画像を含む UL は次のとおりです。

<ul class="ui-tabs-nav ui-tabs ui-widget ui-widget-content ui-corner-all">
  <li class="ui-tabs-nav-item ui-tabs-selected"><a><img src="2013/08/16-150x112.jpg" alt="" width="90" height="57" id="nav-fragment-0" ></a></li>
  <li class="ui-tabs-nav-item ui-tabs-selected"><a><img src="2013/05/1-150x112.jpg" alt="" width="90" height="57" id="nav-fragment-1" ></a></li>
  <li class="ui-tabs-nav-item ui-tabs-selected"><a><img src="2013/06/P6172474-150x112.jpg" alt="" width="90" height="57" id="nav-fragment-2" ></a></li>
  <li class="ui-tabs-nav-item ui-tabs-selected"><a><img src="2011/12/Florence.out_-150x112.jpg" alt="" width="90" height="57" id="nav-fragment-3" ></a></li>
  <li class="ui-tabs-nav-item ui-tabs-selected"><a><img src="2013/08/11-150x112.jpg" alt="" width="90" height="57" id="nav-fragment-4" ></a></li>
</ul>

ここにdivがあります：

<div id="fragment-0" class="ui-tabs-panel ui-tabs-hide"></div>
<div id="fragment-1" class="ui-tabs-panel ui-tabs-hide"></div>
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide"></div>
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide"></div>
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide"></div>

2 番目の質問は、これらを 10 秒ごとにフリックしてから連続的にループさせるにはどうすればよいかということです。

4

6 に答える 6

0

画像に関連するすべての div と画像自体に何らかのクラスを与えます。お気に入り：

<img src="#" class="someImg" />
<img src="#" class="someImg" />
<img src="#" class="someImg" />
<img src="#" class="someImg" />
<img src="#" class="someImg" />

<div class="relatedDiv"> ... </div>
<div class="relatedDiv"> ... </div>
<div class="relatedDiv"> ... </div>
<div class="relatedDiv"> ... </div>
<div class="relatedDiv"> ... </div>

jQuery を使用して、どちらがクリックされたかを確認します。

$(".someImg").click(function(){
    var eq = $(this).index() - 1; // because index() is one-based and eq() is zero-based

    $(".someImg").fadeTo("slow", 0.33);
    $(this).fadeTo("slow", 1);
    $(".relatedDiv").hide().eq(eq).show();
})

質問の 2 番目の部分については、setInterval 関数を使用できます (「アクティブ」などの追加のクラスを設定して、現在どの画像が選択されているかを判断する方が簡単です)。

于 2013-08-21T15:43:13.907 に答える
0

クラスやdivをhtmlに追加せずに、このような問題を解決できます

//initialize these arrays with all the nav-fragments and fragments ids
var navFragment = [$("#nav-fragment-0"), $("#nav-fragment-1"), $("#nav-fragment-2")];

var fragment = [$("#fragment-0"), $("#fragment-1"), $("fragment-2")];

//from here the problem is solved in general
var i,j;
for(i=0; i < navFragment.length;i++) {
   navFragment[i].click( (function(selected) {
     return function() {
       for(j=0; j < navFragment.length;j++) {
            if(j !== selected) {
                fragment[j].hide();
                navFragment[j].fadeTo("slow", 0.33);
            } else {
                fragment[j].show();
                navFragment[j].fadeTo("slow", 1);
            }
        }
     }
   })(i);    
   );
}
于 2013-08-21T16:02:49.860 に答える
0

@Arnaudの回答に同意しますが、クエリの2番目の部分を参照して、それらをループしてこれを行うことができます。

$(document).ready(function () {
    iterator = 1;

    $("a.nav-fragment").on("click", function (event) {
        $(this).fadeTo("slow", 1);
        $(this).siblings("a.nav-fragment").fadeTo("slow", 0.33);
    });

    // set interval for ever 1 second (1000 milliseconds)
    setInterval(function () {
        $($("a.nav-fragment")[iterator - 1]).trigger('click');
        if ((iterator) == $("a.nav-fragment").length) {
            iterator = 1;
        } else {
            iterator++;
        }
    }, 1000)

});

フルフィドルhttp://jsfiddle.net/rp4ZJ/

ミリ秒に 0 を追加するために 10 秒ごとに実行し、最初に最初のクリックを最初にトリガーする場合は覚えておいてください。これは、誰かがクリックした後も続行されます。イテレータの場所から続行します。順序を変更したい場合は、クリック リスナーの反復子の値を操作できます。

于 2013-08-21T16:09:48.087 に答える
0

アクティブな状態を CSS で処理し、jQuery を使用してそれらのクラスを切り替えることをお勧めします。

コードペン スケッチ。

jQuery

$('.nav-fragment').on('click', function() {
  $('.nav-fragment').removeClass('active');
  $(this).addClass('active');
});

HTML

<div class='nav-fragment active'></div>
<div class='nav-fragment'></div>
<div class='nav-fragment'></div>
<div class='nav-fragment'></div>
<div class='nav-fragment'></div>

CSS

.nav-fragment {
  background: crimson;
  cursor: pointer;
  display: inline-block;
  height: 200px;
  opacity: 0.33;
  width: 200px;

  -webkit-transition: opacity 1s;
     -moz-transition: opacity 1s;
          transition: opacity 1s;
}

.nav-fragment.active {
  opacity: 1;
}
于 2013-08-21T15:50:47.930 に答える