Display the class of different tags from one ID each click

Question

I want to make a code that takes the class of an ID whenever it is clicked:

html

<ul>
    <li id="alert-class" class="class-1">1</li>
    <li id="alert-class" class="class-2">2</li>
    <li id="alert-class" class="class-3">3</li>
</ul>

Javascript

<script type="text/javascript">
    var $j = jQuery.noConflict();

    $j(document).ready(function() {
        var $alertando = '';
        $j("#alert-class").click(function() {
            $alertando = $j(this).attr("class");
            alert($alertando);
        });
    });
</script>

Until it works well, the alert prints the right information, but only prints the value of the first "read" when I click on it. The other "li" s and their respective class alerts do not work.

Well, I tried to do it in several different ways, tried to use "each" but failed to simplify my code.

Where I want to use it is much more complex than that, but I found it better to simplify and facilitate understanding and ends up working the same way, I imagine.

I await answers and thank you in advance!

Answer 1

Simply why a id, must be unique (at all times), then the selector finds the first and to.

Definition of the attribute id.

One option would be to put the id, ai yes unique in the ul, thus:

var $j = jQuery.noConflict();

$j(document).ready(function() {
  var $alertando = '';
  // modificando seu seletor para pegar todos os li filhos diretos de ul com id = alert-class
  $j("ul#alert-class > li").click(function() {
    $alertando = $j(this).attr("class");
    alert($alertando);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="alert-class">
  <li class="class-1">1</li>
  <li class="class-2">2</li>
  <li class="class-3">3</li>
</ul>

Observing

From what I can tell, you also seem to be using the attribute class, for the purposes he was not conceptually created (and MDN definition of class), in this case, if you intend to store/save business data in an HTML element, use data Attributes. As shown in the following example:

var $j = jQuery.noConflict();

$j(document).ready(function() {
  var $alertando = '';
  // modificando seu seletor para pegar todos os li filhos diretos de ul com id = alert-class
  $j("ul#alert-class > li").click(function() {
    $alertando = $j(this).data("message");
    alert($alertando);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="alert-class">
  <li data-message="class-1">1</li>
  <li data-message="class-2">2</li>
  <li data-message="class-3">3</li>
</ul>

Answer 2

First of all you must define id unique to each element.

But what you want can be done like this:

$("li").click(function () {
   alert($(this).attr("class"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li id="alert-class" class="class-1">1</li>
    <li id="alert-class" class="class-2">2</li>
    <li id="alert-class" class="class-3">3</li>
</ul>