, wie durch die in nativer JavaScript eine Klasse Element erfassen

Question

Hallo jeder in Stackoverflow,

ich eine Funktion in Javascript erstellen mag, dass die user_box Klasse erfassen und den id-Attribut-Wert dann die Backgroundcolor der Änderung erhalten user_box Klasse, die ich angeklickt nicht nur alle

ich tun will, dass mit nativer JavaScript .... keine Bibliothek wie jquery

<?php foreach($description AS $descriptions): ?> 

<div onclick="" class="user_box" id="<?php echo $descriptions->name; ?>"> 
    <?php echo $descriptions->all; ?> 
</div 

<?php endforeach; ?> 

Answer 1

eine html wie folgt Gesetzt:

<div onclick="updateBackgroundColor(this);" class="user_box" id="..."> 
    <!-- ... --> 
</div 

dieses Javascript Versuchen:

function updateBackgroundColor(element) { 
    console.log(element.id); 
    element.style['background-color'] = "whatever_color"; 
} 

Answer 2

Sie click Ereignis auf div binden können, die class user_box und bekommen die id attribute haben, die jemals div

$('.user_box').click(function (e) { 
var id = $(this).attr('id'); 
$(this).css("background-color", "blue"); 
}); 

Answer 3

Verwenden DOM getElementsByClassName Elemente geklickt wurde zu erhalten nach Klasse.

var elements = document.getElementsByClassName("example"); 
for (var i = 0; i < elements.length; i++) 
    elements[i].addEventListener("click", myOnClickFunction); 

oder eine bessere Nutzung jQuery/Zepto on Funktion:

$(".example").on("click", myOnClickFunction)` 

Answer 4

Sie könnten das Click-Ereignis auf dem Dokument erfassen und dann das eigentliche Element überprüfen, hat die Klasse von Interesse geklickt wurde.

Hier finden Sie einige JavaScript-Code Sie verwenden:

document.onclick = function(e) { 
 
    if (e.target.classList.contains('user_box')) { 
 
     var id = e.target.id; 
 
     console.log('clicked id:', id); 
 
     // get previous element that has special background 
 
     var selected = document.querySelector('.highlight'); 
 
     // ...remove the highlight from previously selected element 
 
     if (selected) selected.classList.remove('highlight'); 
 
     // ... and put the highlight on on this one: 
 
     e.target.classList.add('highlight'); 
 
    } 
 
};

.user_box { 
 
    border: 1px solid; 
 
} 
 
.highlight { 
 
    background: yellow; 
 
}

<div class="user_box" id="myid1"> 
 
    div number 1 - click me 
 
</div> 
 
<div class="user_box" id="myid2"> 
 
    div number 2 - click me 
 
</div> 
 
<div class="user_box" id="myid3"> 
 
    div number 3 - click me 
 
</div>

Answer 5

Versuchen Sie, diese sehr einfachen Code, der user_box Hintergrund onClick und Konsole id-Attribut ändert.

<div onClick="usbo()" class="user_box" id="<?php echo $descriptions->name; ?>"></div> 

function usbo(){ 
var usbx = document.querySelector(".user_box"); 
usbx.style.backgroundColor = "blue"; 
console.log(usbx.getAttribute('id')); 
}