Display the class of different tags of an ID with each click

Question

Display the class of different tags of an ID with each click

Navigation

#1 by (3 votes)
#2 by (0 votes)

1

I want to make a code that takes the class of an ID each time 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 fine, the alert prints the right information, but only prints the value of the first "li" when I click on it. The other "li" s and their class alerts do not work.

Well, I tried to do it in several different ways, I tried to use "each" but I did not succeed in simplifying my code.

Where I want to use it is much more complex than that, but I found it simpler and simpler to understand, and it works the same way, I imagine.

I am waiting for answers and thank you in advance!

html jquery

asked by anonymous 12.03.2015 / 13:14

2 answers

0

First of all you should set% cos_de% 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><liid="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>

12.03.2015 / 13:24

Change color of several Panel's dynamically error Uncaught SyntaxError: missing) after argument list

score 3 · Accepted Answer

Simply because a id should be unique ( always ), then the selector finds the first and to.

Definition of the id attribute.

One option would be to put id , then yes only in ul , like this:

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><ulid="alert-class">
  <li class="class-1">1</li>
  <li class="class-2">2</li>
  <li class="class-3">3</li>
</ul>

Note

As far as I could tell, you also seem to be using the class attribute, for the purposes that it was not concretely created (and MDN definition of class ), in case if you intend to store / save business data in an HTML element, use data attributes . As demonstrated 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><ulid="alert-class">
  <li data-message="class-1">1</li>
  <li data-message="class-2">2</li>
  <li data-message="class-3">3</li>
</ul>