1

ページに一連の投稿があるWPでページを開発しています。これらはスライドショーに追加され、その下に投稿ギャラリーの画像が非表示の非表示のdivがあり、これらのギャラリーは投稿に分割されて生成されますこれらのコンテナが実際の投稿コンテンツであることを除いて、投稿のスライドショーと同じです。

スライドショー アイテムをクリックすると、非表示のコンテナー内の関連プロジェクトの表示が切り替わり、スライダーの上に表示されます。スライダーを閉じて div をクリアできます。現在、以下に示すように、テストとしてボタンに取り組んでいます。

wordpress クエリ投稿によって生成された以下のマークアップ:

投稿の量をカウントする JavaScript ループによって作成された投稿にリンクするボタン:

<button class="toggles">work-1</button>
<button class="toggles">work-2</button>
<button class="toggles">work-3</button>

その下に .project という非表示のコンテナがあり、プロジェクトをクリックすると表示されます。

マークアップは次のとおりです。

<article class="post royalSlider rsMinW"id="work-2 Exposure">
  <img src="http://2mz:8888/wp-content/uploads/2013/02/interactive_table2.jpg"alt="" />
    <div class="rsContent">
      <span class="rsABlock txtLeft col1" data-move-effect="none">interactive_table</span>
      <span class="rsABlock txtLeft col2" data-move-effect="none">
      </span>
    </div>
   <img src="http://2mz:8888/wp-content/uploads/2013/02/table_build_03.jpg"alt="" />
   <div class="rsContent">
      <span class="rsABlock txtLeft col1" data-move-effect="none">table_build_03</span>
      <span class="rsABlock txtLeft col2" data-move-effect="none">
      </span>
   </div>
   <img src="http://2mz:8888/wp-content/uploads/2013/02/table_build01.jpg"alt="" />
   <div class="rsContent">
      <span class="rsABlock txtLeft col1" data-move-effect="none">table_build01</span>
      <span class="rsABlock txtLeft col2" data-move-effect="none"></span>
   </div>
   <img src="http://2mz:8888/wp-content/uploads/2013/02/table_build02.jpg"alt="" />
   <div class="rsContent">
      <span class="rsABlock txtLeft col1" data-move-effect="none">table_build02</span>
      <span class="rsABlock txtLeft col2" data-move-effect="none"></span>
   </div>
   <img src="http://2mz:8888/wp-content/uploads/2013/02/table_detail.jpg"alt="" />
   <div class="rsContent">
      <span class="rsABlock txtLeft col1" data-move-effect="none">table_detail</span>
      <span class="rsABlock txtLeft col2" data-move-effect="none">
      </span>
   </div>
</article>

私が抱えている問題は、基本的に #work- のプレフィックスを持つトップボタンを、同じ id="#work-1,2,3...etc を持つ実際の非表示プロジェクトの ID にリンクする JavaScript があることです。 " そのようです：

var projects = $('.project section article[id^="work-"]');
var num = projects.length;
//var nav = $('.projects section article')

console.log(num);

for (i=1; i<=num; i++) {

    $('<button class="toggles" />').text('work-'+i).appendTo('#site-logo');
}

$('.toggles').live('click',
    function(){
    var thisIs = $(this).index();
    $('.projects > .project section article[id^="work-"]').eq(thisIs).toggle();
    $('.project').fadeIn(1000, 'easeInOutQuart');
});

それは機能しますが、常に最後のプロジェクトが除外されるため、そのうちの 2 つを機能させることができますが、ボタンにリンクされているプロジェクトの 1 つがまったく機能しません。

なぜそれが機能しないのか、またはこれを行うためのより良い方法について誰かが考えていますか?

ありがとう、マーク

4

1 に答える 1

0

ライブクリック関数内でthisIsは、インデックスがゼロであるため、クリックしているものの名​​前と実際には一致しません。プロジェクトセクションのマークアップ全体がないので、それが問題かどうかはわかりませんが、あなたは言います

接頭辞＃work-が付いた上部のボタンを、同じid = "＃work-1,2,3...etc"が付いた実際の非表示プロジェクトのIDにリンクします

これは、一致する必要があることを意味します。work-1ボタンは、取得中のwork-0ではなく、work-1プロジェクトを表示する必要があります。

したがって、インデックスに1を追加できます。

var thisIs = $(this).index() + 1;

または、要素を作成するときにクリックハンドラーを追加することもできます。

for (i=1; i<=num; i++) {
  $('<button class="toggles"/>')
    .text('work-'+i)
    .attr('button-index', i)
    .appendTo('#site-logo')
    .bind('click', function() {
        var buttonIndex = $(this).attr('button-index');
        // prove the index is correct
        console.log(buttonIndex );

        // rest of the click handler code=
        $('.projects > .project section article[id^="work-"]').eq(buttonIndex ).toggle();
        $('.project').fadeIn(1000, 'easeInOutQuart');
    });
}

これにより、ボタンのマークアップが次のようにレンダリングされます。

<button class="toggles" button-index="1">work-1</button>
<button class="toggles" button-index="2">work-2</button>
<button class="toggles" button-index="3">work-3</button>

個人的には、必要なデータを関連するdom要素の属性として設定するのが好きです。これにより、何が起こっているのかを簡単に確認できます。また、属性からデータを取得することはjQueryで変更される可能性は低いですが、.index()呼び出し元の場所に移動したり、クエリを微調整したりすると、関数を使って足を踏み入れる可能性があります。

最後に、これ.liveはjQuery 1.7で非推奨になり、1.9で削除されたため、これを使用して他のハンドラーをアップグレードしてプロアクティブに変更することをお勧めします。.on

于 2013-02-14T18:47:42.253 に答える