How Get Name Class With Javascript?

Question

Hi everyone i need get name class menu li for load this page

html

<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>

js

$(document).on('click','.menu li',function(){
    var Get_Name_Class = //Get Name Class
    if(/* var Get_Name_Class*/).hasClass("page2")) {
      $(".load").load('page2.php');
    }
    else if(/* var Get_Name_Class*/).hasClass("page3")) {
      $(".load").load('page3.php');
    }
});

how can i this ( get id or class not difference )

$(this).attr('class')

cwallenpoole
– cwallenpoole

2017-02-11 06:10:16 +00:00
Commented Feb 11, 2017 at 6:10 — cwallenpoole
– cwallenpoole, Commented Feb 11, 2017 at 6:10

Pranav C Balan · Accepted Answer · 2017-02-11 06:10:40Z

4

Use this to refer the clicked element inside the handler callback.

$(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');
    }
});

answered Feb 11, 2017 at 6:10

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GeorgeDopeG · Accepted Answer · 2017-02-11 06:12:02Z

3

You can do it using jQuery. If it is class you can do:

$(".className")

if it is id you can do:

$("#idName")

if it is just html element you can do:

$("elementName")

answered Feb 11, 2017 at 6:12

GeorgeDopeG

1753 silver badges14 bronze badges

1 Comment

guest271314 Over a year ago

How does Answer get .className of element?

guest271314 · Accepted Answer · 2017-02-11 06:13:13Z

1

Pass this.className with ".php" concatenated to .load()

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

answered Feb 11, 2017 at 6:13

guest271314

1

Comments

Hardik Kalathiya · Accepted Answer · 2017-02-11 06:16:06Z

0

$(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');
    }
});

<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>

answered Feb 11, 2017 at 6:16

Hardik Kalathiya

2,2531 gold badge20 silver badges29 bronze badges

Comments

Mayank Bali · Accepted Answer · 2017-02-11 06:21:46Z

0

use "#" symbol for id so your code becomes ("#idname") or u can use "this" which points to the present class u are working on

answered Feb 11, 2017 at 6:21

Mayank Bali

1

Comments

Roko C. Buljan · Accepted Answer · 2017-02-11 06:36:09Z

0

Don't use classnames. One day you'll add an extra class to those elements and your site will stop working and you'll be left wondering why - or in the worst case it'll slip unnoticed.

Say you have one or even more buttons for page2 triggering - than it's the perfect place to use the data-* attribute!

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

});

<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>

edited Feb 11, 2017 at 6:36

answered Feb 11, 2017 at 6:23

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Collectives™ on Stack Overflow

How Get Name Class With Javascript?

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related