0

私は自分のウェブサイトにこのスクリプトを持っています：

$(document).ready(function() {
  function filterPath(string) {
    return string
      .replace(/^\//,'')
      .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
      .replace(/\/$/,'');
  }

  $('[href*=#]').each(function() {
    if ( (filterPath(location.pathname) == filterPath(this.pathname))
      && (location.hostname == this.hostname)
      && (this.hash.replace(/#/,'')) ) {

      var $targetId = $(this.hash), 
        $targetAnchor = $('[name=' + this.hash.slice(1) +']');
      var $target = $targetId.length 
        ? $targetId 
        : $targetAnchor.length ? $targetAnchor : false;
      if ($target) {

        var divOffset = $target.parent().offset().top;
        var pOffset = $target.offset().top;
        var pScroll = pOffset - divOffset;

        $(this).click(function() {
          $target.parent().animate({scrollTop: pScroll + 'px'}, 600);
          return false;
        });
      }
    }
  }); 
});

それはうまく機能し、メインのナビゲーションdivなどを上下divにスクロールしますが、サービスセクション内の s を左右にスクロールしたいです。<a href...>また、ポートフォリオ セクションにスライダーを追加したいのですが、上記のコードはすべてのタグに適用されるため、追加のコードを支配しています。mainnav にのみ指定するにはどうすればよいulですか?

前もって感謝します

4

3 に答える 3

1

セレクターを「[href*=#]」から「ul.mainnav [href*=#]」に変更します。

必要な要素だけを提供するセレクターの書き方は、jQuery を使用する際に知っておくべき最も重要なことです。セレクターに関する優れた jQuery ドキュメントを読むことをお勧めします(ただし、他のものもお勧めします)。

于 2009-06-21T17:22:33.793 に答える
0

次の構造があり、「foo」リンクにのみ関数を適用するとします。そして、他のすべてをそのままにしておきます。

<div id="mainnav">
  <ul>
    <li>
      <a href="#">foo</a>
    </li>
    <li>
      <a href="http://www.example.com">foo2</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">foo3</a>
    </li>
  </ul>
  <a href="#">foobar</a>
</div>

次に、そのようなjQueryの選択を使用できます

$("#mainnav > ul:first").find("a[href*=#]").css('color','red');

バラバラに壊れた

$("#mainnav > ul:first")
//give me the element with id mainnav and then the first ul child element of it

.find("a[href*=#]")
//find all link elements in this ul which have href set to #

.css('color','red');
//and set their color to red
于 2009-06-21T17:22:03.700 に答える
0

あなたの質問を正確に理解しているかどうかはわかりませんが、特定の要素でのみリンクを見つける方法を探している場合は、セレクターを展開できます。

// Assuming your mainnav ul has id="mainnav"
$('ul#mainnav [href*=#]').each(...);

ただし、私に尋ねると、それはほとんど一時的な修正です。遅かれ早かれ、効果を他の要素に適用したくなるかもしれません。class効果が必要な要素の属性を追加できます。

<a href="#" class="scroll-effect">...</a>

次に、次のように選択します。

$('.scroll-effect').each(...);
于 2009-06-21T17:24:06.240 に答える