.js 文件上的 Document.getElementById 错误答案

【问题标题】：Document.getElementById Error on .js file.js 文件上的 Document.getElementById 错误
【发布时间】：2017-08-29 20:43:26
【问题描述】：

document.getElementById 错误

Drupal.behaviors.Menu = {
attach: function () {

  var url = window.location.href;
  var baseUrl =  Drupal.settings.baseUrl;
  var page1 = baseUrl+'/path/page1';
  var page2 = baseUrl+'/path/page2';
  var page3 = baseUrl+'/path/page3';

  if($(".classname").length < 3) {      
    $( "#hook" ).append("<a class='classname' href='' id='page1_id'>page 1</a>");
    $( "#hook" ).append("<a class='classname' href='' id='page2_id'>page 2</a>");
    $( "#hook" ).append("<a class='classname' href='' id='page3_id'>page 3</a>");
  }
  if(url == baseUrl+'/path') {

    document.getElementById("page1_id").href = page1;
    document.getElementById("page2_id").href = page2;
    document.getElementById("page2_id").href = page3;      
  }   
}
};

请不要混淆 page1 is(var) 和 page1_id is(id)。

在上面的函数中，我知道 if 语句附近有一个错误如果（网址 == 基地...）这是错误的确切位置。所以想知道我在哪里犯了错误（错误如下所示）

--> 当我打开该特定页面时，这些是完美连接的菜单链接，当我单击 page1 时，它会完美打开。

问题是我首先打开的页面在接下来的两页中不断出现。就像我先点击 page2，下一个 page1 或 page3（仍然显示 page2）。

页面刷新后

如果我先点击 page3，下一个 page1 或 page2（仍然显示 page3）。因为 document.getElementById 只保存前一个 URL。

非常感谢您的帮助。

【问题讨论】：

有点令人困惑，你能用一个最小且可验证的例子来说明你遇到了什么错误吗？
混合使用 JQuery 和 Javascript 通常是个坏主意，您可以通过 $("#id") 在 Query 中按 ID 选择元素
不，不是，您只需要记住在将元素处理到 jquery 之前将它们包装起来，然后将它们作为元素处理。 jQuery 中没有什么神奇的东西会突然让 javascript 的其余部分表现不同。

标签： drupal

【解决方案1】：

让用户理解我的网址就像 http://site.localhost/path/page1（类似page2和page3）

这需要在移动到暂存和生产

时进行更改

Below code solved my issue

!警告当心cmets。

Drupal.behaviors.Menu = {
attach: function () {

  //var url = window.location.href;
  var baseUrl =  Drupal.settings.baseUrl;
  var page1 = baseUrl+'/path/page1';
  var page2 = baseUrl+'/path/page2';
  var page3 = baseUrl+'/path/page3';
  //modified
  var parts = windows.loaction.pathname.split('/');
  var query = parts[parts.length-1].split('.html');
  //added these two variables for splitting the url.

  if($(".classname").length < 3) {      
    $( "#hook" ).append("<a class='classname' href='' id='page1_id'>page 1</a>");
    $( "#hook" ).append("<a class='classname' href='' id='page2_id'>page 2</a>");
    $( "#hook" ).append("<a class='classname' href='' id='page3_id'>page 3</a>");
  }
  //if(url == baseUrl+'/path') {
  if(query[0] == 'path' || query[0] == 'page1' || query[0] == 'page2' || query[0] == 'page3'){

    document.getElementById("page1_id").href = page1;
    document.getElementById("page2_id").href = page2;
    document.getElementById("page2_id").href = page3;      
  }   
}
};

【讨论】：