jquery - 在 GetElementByID 中使用变量

Question

我有一个场景，我正在构建一系列 DIVS，每个 DIVS 都有一个以语法“div1”、“div2”等分配的 ID……

div 看起来都很好，我可以看到他们的 ID 都被正确分配了......

我正在尝试使用以下代码来允许单击（传递 ID 的位置）来切换相应 div 的显示：

$("#page-wrap li a").click(function(id){
 var thisid = ('#'+$(this).attr('id').toString());
 alert(thisid);
 document.getElementById(thisid).hide();
}

但错误控制台显示 getelementbyid 具有空值。

我错过了什么？我尝试将 thisid var 强制为字符串，但这也不起作用。

感谢任何人都可以为我阐明这一点。

Answer 1

你在混合使用 jQuery 和标准 DOM 方法吗？

像这样的东西应该可以代替：

鉴于标记：

<a href="#someDiv">Hide the div</a>
<div id="someDiv">DIV to be hidden</div>


$("a").click(function(e){
  e.preventDefault(); // prevents page reload
  $($(this).attr('href')).hide();
});

Answer 2

您似乎将普通的 dom 调用与 jQuery 混合在一起。为了一致性，试试这个：

$("#page-wrap li a").click(function(id){
    var thisid = ('#'+$(this).attr('id'));
    alert(thisid);
    $(thisid).hide();
});

Answer 3

<div>您的和<a>标签上不应有相同的 ID 。相反，您可以通过<div>锚点的数据属性传递您的 ID：

<div id="div2">this is div2</div>
<a href="#" data-id="div2">click here to hide div2</a>

然后，单击处理程序将如下所示：

$('a').click(function() {
  // $(this).data('id') == "div2"
  $(document.getElementById($(this).data('id'))).hide();
  return false;
});