1


1

クリックしたリンクのrel属性と同じIDを持つdivを選択する

これは2部構成の質問です。 私はプロジェクトにjQueryを使用しており、リンクをクリックして、クラス名「ハイライト」をそのリンクと、リンクの_rel_属性と同じidのdivに切り替えたいと思っています。 次に、クラス名「ハイライト」なしで次のdivにリンクできるようにします。 HTMLは次のとおりです。

   Item 1
   Item 2
   Item 3


go to next div without class of highlight


some text
some text
some text

誰でもjQueryの側面を手伝うことができますか?

事前に感謝します!

1 Answer


1


HTMLを次のように仮定します。

  Item 1
  Item 2
  Item 3


Go to next div without class "highlight"

Panel 1
Panel 2
Panel 3

次のようにJSを使用できます。

$('ul li a').click(function () {
  var $this = $(this), //
      id = $this.attr('rel'),
      nextUnhighlighted = $('#next-unhighlighted'), //
      targetDiv = $('#' + id),
      nextDiv;

  // Un/highlight the clicked link
  $this.toggleClass('highlight');

  // Un/highlight the div related to the target link
  targetDiv.toggleClass('highlight');

  // Update nextUnhighlighted to point to next unhighlighted div
  nextDiv = $('div.panel:not(.highlight)');
  if (nextDiv[0]) { // A next sibling was found
    nextUnhighlighted.attr('href', '#' + nextDiv.attr('id'));
  } else {
    nextUnhighlighted.removeAttr('href');
  }
});

最後のパネルがすでにハイライトされている場合、このコードは「a#next-unhighlighted」の「href」属性を更新しませんが、削除します。 最後のパネルを強調表示すると最初のパネルにリンクされるように、ラップアラウンド動作を追加するのは簡単な作業です。

奇妙な構文 `if(nextDiv [0])`に関する注意:jQueryコレクション `nextDiv`の最初の要素が存在する場合、コレクションには少なくとも1つの要素があります。 これは「nextDiv.length> 0」と同じように動作しますが(正確に同じではありません)、わずかに高速で小さくなります。

'' '' '

コメントで説明したように、各パネルを次のハイライトされていないパネルにリンクするには、各パネルのHTMLに「次のパネル」を追加し、メインのクリックハンドラーに次のようなものを追加します。

$('div.panel a[rel="next-panel"]').each(function () {
  var $this = $(this),
      nextPanel = $this.parent().next('div.panel:not(.highlight)');
  if (nextPanel[0]) {
    $this.attr('href', '#' + nextPanel.attr('id'));
  }
});

プロジェクトの要件に応じて、これらの各 `next-panel`リンクを初期化する必要があります(または、最初のクリック後にのみ初期化されます)。最後のパネルの; omlは、最初。