WordPressのDiviテーマで動作するスクロールjQueryスクリプトのハイライトメニュー項目を取得できない

Question

私はDiviテーマのある1ページのWordPress Webサイトをビルドしています。ここでページが上下にスクロールされている間、 ：http://codepen.io/ivanchi/pen/QEEeKd?editors=0010。問題は、Wordpressで動作させることができないということです。私はこのコードを使用してequeued：

<?php 
 
add_action('wp_enqueue_scripts', 'my_enqueue_assets', 16); 
 
      
 
      wp_register_script('jqueryMinJs', 'http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' , '', '', true); 
 
      wp_enqueue_script('jqueryMinJs'); 
 
      
 
      wp_register_script('highlight-on-scroll', get_template_directory_uri().'/js/highlight_on_scroll.js', array('jquery'), false, true); 
 
\t  wp_enqueue_script('highlight-on-scroll');  
 
} 
 
?>

を、私は/js/highlight_on_scroll.jsディレクトリにjQueryのスクリプトが含まれていました。

var $jq = jQuery.noConflict(true); 
 
(function($) { 
 

 
       $jq("div").css("border", "1px solid red"); 
 
\t \t $jq("#et-top-navigation a").addClass("green-navigation"); 
 

 
// Cache selectors 
 
var lastId, 
 
topMenu = $jq("#et-top-navigation"), 
 
topMenuHeight = topMenu.outerHeight()+1, 
 
// All list items 
 
menuItems = topMenu.find("a"), 
 
// Anchors corresponding to menu items 
 
scrollItems = menuItems.map(function(){ 
 
    var item = $jq($jq(this).attr("href")); 
 
    if (item.length) { return item; } 
 
}); 
 

 
// Bind click handler to menu items 
 
// so we can get a fancy scroll animation 
 
menuItems.click(function(e){ 
 
    var href = $jq(this).attr("href"), 
 
     offsetTop = href === "#" ? 0 : $jq(href).offset().top-topMenuHeight+1; 
 
    $jq('html, body').stop().animate({ 
 
     scrollTop: offsetTop 
 
    }, 850); 
 
    e.preventDefault(); 
 
}); 
 

 
// Bind to scroll 
 
$jq(window).scroll(function(){ 
 
    // Get container scroll position 
 
    var fromTop = $jq(this).scrollTop()+topMenuHeight; 
 
    
 
    // Get id of current scroll item 
 
    var cur = scrollItems.map(function(){ 
 
    if ($jq(this).offset().top < fromTop) 
 
     return this; 
 
    }); 
 
    // Get the id of the current element 
 
    cur = cur[cur.length-1]; 
 
    var id = cur && cur.length ? cur[0].id : ""; 
 
    
 
    if (lastId !== id) { 
 
     lastId = id; 
 
     // Set/remove active class 
 
     menuItems 
 
     .parent().removeClass("mactive") 
 
     .end().filter("[href=#"+id+"]").parent().addClass("mactive"); 
 
    }     
 
}); 
 
}($jq));

私は中古

紛争を防止し、これらの2行は正常に動作しているため210

var $jq = jQuery.noConflict(true);

（私はテスト目的のためにそれらを追加しました）

  $jq("div").css("border", "1px solid red"); 
 
    \t \t $jq("#et-top-navigation a").addClass("green-navigation");

が、jQueryのスクリプトの残りの部分はしていません。

私は間違っていますか？

Answer 1

jqueryコードの背後にある理由は、デリミタとして使用する必要があるためです。

プランナーを確認します。

http://plnkr.co/edit/owvH2WPMJ10AQS3MkcHC

あなたが使用している場合。 2番目のアラートが表示されますが、使用するとコードはそこに届きません。

topMenu = $jq("#et-top-navigation"); 
topMenuHeight = topMenu.outerHeight()+1;