2017-02-11 1 views
1

Hallo alle ich brauche Namen Klasse Menü li für Last dieser SeiteWie Get Name Klasse mit Javascript?

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

bekommen, wie kann ich diese (id oder Klasse nicht Differenz erhalten)

+0

$ (this) .attr ('Klasse') – cwallenpoole

Antwort

4

Verwenden Sie this, um das angeklickte Element im Handler-Callback zu verweisen.

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

Sie können es mit jQuery tun. Wenn es Klasse ist, können Sie tun:

$(".className") 

wenn es id Sie tun können:

$("#idName") 

wenn es nur HTML-Element können Sie tun:

$("elementName") 
+0

Wie Antwort '.className' von Element bekommen? – guest271314

1

Pass this.className mit ".php" verkettet zu .load()

$(document).on('click','.menu li',function() { 
    $(".load").load(this.className + ".php") 
}); 
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>

0

Verwendung Symbol "#" für id, damit Ihr Code wird ("#idname") oder u kann "dies" benutzen, das die vorliegende Klasse Punkte u arbeitet an

0

Verwenden Sie keine Klassennamen. Eines Tages werden Sie diesen Elementen eine zusätzliche Klasse hinzufügen, und Ihre Website wird nicht mehr funktionieren, und Sie werden sich fragen, warum - oder im schlimmsten Fall wird sie unbemerkt verschwinden.

Sagen Sie bitte einen oder sogar mehr Tasten für page2 haben Auslösung - als es der perfekte Ort ist das data-* Attribut zu verwenden!

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