试图将选择器存储在变量中答案

【问题标题】：trying to storing selectors in variables试图将选择器存储在变量中
【发布时间】：2013-06-26 06:38:33
【问题描述】：

好的，这就是我想要做的。我有一个 navLink 类，其 ID 为 1 到 x（在本例中为 5，但我的想法是如果需要我可以添加到它）。以及 Selection 类下的 Div，1Div 到 xDiv。 div 的切换，以及 navlinks 改变颜色，就好像它使用 CSS 活动标签一样。这在我使用 Home div 并且我不希望其中一个链接启动时非常有效。现在我正在尝试这样做，我需要能够将给定的选择器存储在“活动”变量中。我也在努力做到这一点，所以当点击 navLink 3 号它转到不同的页面时，我遇到了同样的问题。我对 JavaScript 有点陌生，所以我不确定 JS 如何存储变量。代码如下：

$(function() {
  var active = $('#1');

  $('.selection').hide();
  $('#1Div').show();

  $('.navLink').hover(
  function() {
     $(this).css("color","#806ac7"); 
  },
  function() {
      if(this === active) {
        $(this).css("color","#961014");
      } else {
        $(this).css("color","#000000");
      }
      });
  $('.navLink').click(function(e){
    active = this;
    $('.navLink').css("color","#000000");
    $(this).css("color","#961014");
      if(this == '#3') {
        location.href = "./Contact.html"  
      } else {
    $('.selection').hide();
    $('#'+ this.id + 'Div').show();
      }
  });
});

提前感谢你们在 stack 的帮助很大。

编辑：

感谢到目前为止的帮助。此处要求提供示例链接：http://jsfiddle.net/fgj6H/ 一切正常，但 navlink 3 上的链接仍在寻求帮助。

【问题讨论】：

您最初将其设置为 var active = $('#1'); 中的 jQuery 扩展元素，然后在执行 @987654324 时将其与 DOMElement 进行比较@.. 你应该把第一条语句改成var active = $('#1')[0];
@epascarello - 因为我不确定这是否是完整的答案.. 也许它只是答案的一部分..
@techfoobar 你说得对，谢谢。现在说得通了。当我在点击命令之前和之后发出警报时，输出是：
[object OBJECT] vs [object HTMLLIElement]
@techfoobar 这和你所说的一样谢谢

标签： javascript jquery html variables css-selectors

【解决方案1】：

编辑：

我认为你需要这个

if(this.id == 'n3')

而不是这个

if(this == '#n3')

原始答案：

我认为这可能是范围问题。

本地范围：

var active = $('#1');

全球范围：

active = this

尝试删除第一个 var 以便它读取

active = $('#1');

编辑：这是您的代码和一些 cmets。

  $(function() {
  // *** this variable is defined with "var" keyword, meaning it is only available
  // in the immediate scope i.e. within the braces (it's more complicated than that)
  var active = $('#1');

  $('.selection').hide();
  $('#1Div').show();

  $('.navLink').hover(
  function() {
     $(this).css("color","#806ac7"); 
  },
  function() {
      // *** this can only refer to a global variable, as "var active" is not present in here. The global will not get defined till .navLink is clicked.
      if(this === active) {
        $(this).css("color","#961014");
      } else {
        $(this).css("color","#000000");
      }
      });
  $('.navLink').click(function(e){

    // *** this sets a new global variable "active" and gives it a value
    active = this;
    $('.navLink').css("color","#000000");
    $(this).css("color","#961014");
      if(this == '#3') {
        location.href = "./Contact.html"  
      } else {
    $('.selection').hide();
    $('#'+ this.id + 'Div').show();
      }
  });
});

【讨论】：

进行了更改并获得了相同的结果。 “活动”变量未存储正确的 ID。感谢您的帮助和理解
@l33tn4 - 请您提供一个 jsfiddle 作为工作示例吗？
完成，链接见上文
@l33tn4 - 我想你只是错过了this.idjsfiddle.net/Ballcheck/fgj6H/1

【解决方案2】：

我认为您的部分问题是 ID 的 必须以 HTML4 中的一个字母 开头，并且 在 HTML5 中必须至少包含一个字母。 ID 不允许以数字开头。我建议将您的 ID 重命名为 id="n1" 并将它们称为

var active = $("#n1");

看到这个答案 What characters are allowed in DOM IDs?

还有 HTML5 规范 http://www.w3.org/TR/html5/dom.html#the-id-attribute

【讨论】：