Apply a style to the single pulsed element

Question

Apply a style to the single pulsed element

Navigation

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

2

I have a problem, I am using jquery, and I need that when I press an element a style is applied, the problem is that all the elements have the same class and I can evaluate it with the event object that I receive the function, but that's only when you have an X number of items that you know, but the elements that are coming from a DB query, so it's a problem to apply the style to that single element clicked, here I leave the code:

 <div class="tarjeta-imagen">
      <img src="./assets/img/perfil.jpg" alt="" class="img-card">
           <div class="tarjeta-footer">
                 Texto de prueba
            </div>
</div>

JQ:

  $(".tarjeta-imagen").click( function(e){

    var elEvento = e;

    $(".tarjeta-footer").css({

        background: '#4BD19B'

    });

})

javascript jquery html5 html css

asked by Brian Hernandez 15.03.2018 в 01:19

source

2 answers

1

You can do it using the operator this , I have tried it in the following way;

    $(document).ready(function(){
    		 	$(".tarjeta-imagen").click( function(){
    
    		    $(this).css({
    		        background: '#4BD19B'
    		    });
    		})
    	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <div class="tarjeta-imagen">
          <img src="./assets/img/perfil.jpg" alt="" class="img-card">
               <div class="tarjeta-footer">
                     Texto de prueba
                </div>
    </div>
     <div class="tarjeta-imagen">
          <img src="./assets/img/perfil.jpg" alt="" class="img-card">
               <div class="tarjeta-footer">
                     Texto de prueba
                </div>
    </div>

In general, the value of this is determined by how the function is called. It can not be established by a runtime assignment, and this can be different each time the function is called.

Documentation: link

answered by 15.03.2018 в 01:32

Multiply matrices in python How can I get decimal points in java?

score 3 · Accepted Answer

The solution has two parts.

Add a monitor (event listener) to each of the elements. One way to do this is using forEach.

Use the this function to modify the properties of the item that has been clicked.

The above can be done with pure JavaScript. Here is an example.

A 3 x 3 table is displayed. Clicking on a cell will add a text and background color to the clicked cell.

[].forEach.call(document.getElementsByTagName('td'), function(td) {
  td.addEventListener('click', function() {
    this.innerHTML = '¡Clic!';
    this.style.background = '#4BD19B';
  });
});

td {
  height: 50px;
  width: 100px;
  border: solid;
  background-color: yellow;
}

<table>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
  </tr>
</table>

Here is an example using jQuery

$('td').on('click',function() {
    this.innerHTML = '¡Clic!';
    this.style.background = '#4BD19B';
  });

td {
  height: 50px;
  width: 100px;
  border: solid;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
  </tr>
</table>