Javascript 使用jQuery.show（）但指定的div无效'；不显示

我有两个div类

信息窗格

。第一个从隐藏开始（

display:none

），第二个有一个元素，单击该元素时，应该隐藏该div并显示第一个

HTML

<div id="infoDiv">
    <div class="info-pane" id="plang">
        <p>Serge Lang</p>
    </div>
    <div class="info-pane" id="pvecspace">
        <p id="thatpar"><span name="plang" class="clickable">Lang</span> 1983 p. 109</p>
    </div>
</div>

CSS

function setEventHandlers(){
    $("div[name], p[name], span[name]").click(function ( event ) {
        loadPane(this.name);
    });
}

function loadPane(paneId){

    $('#infoDiv div:not(#' + paneId + ').info-pane').hide();
    $('#' + paneId).show();

}

setEventHandlers();

#infoDiv {
    height: 200px;
    border: 1px solid black;
}
span.clickable {
    cursor: pointer;
}
#plang {
    display: none;
}

链接到JSFiddle 以下是一个（不）正在工作的JSFIDLE：

---

我在为基于

div

的

console.log（）

设置找到的JSFIDLE代码中包含了这些代码，因此，如果需要，您可以使用这些代码来尝试并调试它。

执行以下更改

loadPane(this.name);

应该是：

loadPane(this.id);

---

您使用的是id targeter

#

，因此您应该使用它的

id

，而不是它的

名称
您必须将jquery代码放入document.ready。使用以下命令：

$(document).ready(function(){
  function setEventHandlers(){
      $("div[name], p[name], span[name]").click(function ( event ) {
          loadPane(this.name);
      });
  }

  function loadPane(paneId){

      $('#infoDiv div:not(#' + paneId + ').info-pane').hide();
      $('#' + paneId).show();

  }

  setEventHandlers();
});

它不起作用，因为内容中不存在此名称。请尝试以下操作：

function setEventHandlers(){
  $("div[name], p[name], span[name]").click(function ( event ) {
        loadPane($(this).attr('name'));
  });}

span元素的
name
属性是另一个元素的
id
属性。谢谢，这很有效。知道为什么像
$（this）.get（0）.name
这样的东西也不起作用吗？@AmadeusDrZaius:因为
.get（）
没有获取DOM的属性，所以它用于使用HTTP get请求从服务器加载数据。要获取/设置属性，您需要在jQuery的上下文中实际使用
.attr（）
。get（0）返回DOM元素，它是jQuery对象集合的第一个元素。但是我刚刚发现span元素没有通过点语法访问的name属性。例如，您必须使用
spanElement.getAttribute（'name'）
。来源：谢谢你的帮助。