Question

大家好我需要获取名称类菜单li才能加载此页面

html

${BASH_REMATCH[2]}

js

<body>
<div class="menu">
  <ul>
    <li class="page2" id="page2">PAGE TOW</li>
    <li class="page3" id="page3">PAGE THREE</li>
  </ul>
</div>
<div class="load"></div>
</body>

我怎么能（获得id或类别没有区别）

Answer 1

使用this引用处理程序回调中单击的元素。

$(document).on('click','.menu li',function(){
    // cache the reference
    var $this = $(this);
    // check using the cached element
    if($this.hasClass("page2")) {
      $(".load").load('page2.php');
    }
    else if($this.hasClass("page3")) {
      $(".load").load('page3.php');
    }
});

Answer 2

你可以使用jQuery来做到这一点。如果是上课你可以这样做：

$(".className")

如果是id，你可以这样做：

$("#idName")

如果它只是html元素，你可以这样做：

$("elementName")

Answer 3

将this.className与".php"

联系起来.load()

$(document).on('click','.menu li',function() {
  $(".load").load(this.className + ".php") 
});

Answer 4

＆＃13;

$(document).on('click','.menu li',function(){
    // cache the reference
    var $this = $(this);
    // check using the cached element
    if($this.hasClass("page2")) {
      $(".load").load('page2.php');
    }
    else if($this.hasClass("page3")) {
      $(".load").load('page3.php');
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="menu">
  <ul>
    <li class="page2" id="page2">PAGE TOW</li>
    <li class="page3" id="page3">PAGE THREE</li>
  </ul>
</div>
<div class="load"></div>
</body>

＆＃13;

Answer 5

对id使用“＃”符号，以便您的代码成为（ “#idname”）或者你可以使用“this”来指出你正在研究的现在的课程

Answer 6

不要使用类名。有一天，你会为这些元素添加一个额外的课程，你的网站将停止工作，你将不知道为什么 - 或者在最坏的情况下，它会被忽视。

假设您有一个甚至更多按钮用于page2触发 - 而不是使用data-*属性的理想场所！

＆＃13;

$(document).on('click', '[data-load]', function() {
  
  var page = $(this).data("load");
  console.log(page); // Just to test
  $(".load").load(page +'.php'); 

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-load="page2">PAGE TWO :) me too</a>

<div class="menu">
  <ul>
    <li data-load="page2">PAGE TOW</li>
    <li data-load="page3">PAGE THREE</li>
  </ul>
</div>
<div class="load"></div>

＆＃13;

如何使用Javascript获取名称类？

6 个答案: