Event click on just the element clicked

Question

Event click on just the element clicked

Navigation

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

-1

My problem is the following, I need that when clicking with an mouse on an html element, the click event is executed only on the element clicked and not that it is executed in the other elements that share the same call.

I could not embed code so I show in a screenshot the script I'm using

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

$(document).ready(function() {
  if( document.documentElement.clientWidth < 2000 ){
    $('#block-quicktabs-beneficios .campos-grupo-ciudades .views-field-field-ciudad span').on('click', function(){  
        if ($('#block-quicktabs-beneficios .campos-grupo-beneficios .campos-grupo-ciudades .views-field-field-ciudad > .field-content').is(':hidden')) {
            $('#block-quicktabs-beneficios .campos-grupo-ciudades .views-field-field-ciudad span').off('click', 'span');
            $('#block-quicktabs-beneficios .campos-grupo-beneficios .campos-grupo-ciudades .views-field-field-ciudad > .field-content').addClass('claseuqemesirveporfavor');    
            $('#block-quicktabs-beneficios .campos-grupo-beneficios .campos-grupo-ciudades .views-field-field-ciudad > .field-content.claseuqemesirveporfavor').show();

        } else {   
          $('#block-quicktabs-beneficios .campos-grupo-beneficios .campos-grupo-ciudades .views-field-field-ciudad > .field-content.claseuqemesirveporfavor').hide(); 
          $('#block-quicktabs-beneficios .campos-grupo-beneficios .campos-grupo-ciudades .views-field-field-ciudad > .field-content').removeClass('claseuqemesirveporfavor');

        }
    });  
  }
  else{
    $('#block-quicktabs-beneficios .campos-grupo-beneficios .campos-grupo-ciudades .views-field-field-ciudad > .field-content').hide();
  }
});

var $ = jQuery.noConflict();
</script>

This is the html:

<div class="views-row views-row-1 views-row-odd views-row-first">     
<div class="views-field views-field-field-logo-imagen-convenio">        
    <div class="field-content"><a href="/beneficios/spacios"><img typeof="foaf:Image" src="http://fincom.geosdigital.org/sites/default/files/styles/convenio-logo/public/unnamed%20%282%29_0.png?itok=TlGPcSER" width="120" height="120" alt=""></a>
    </div>
</div>  

<div class="campos-grupo-beneficios views-fieldset" data-module="views_fieldsets">
    <div class="views-field views-field-field-t-tulo-corto"><h2 class="field-content"></h2>
    </div>      
    <div class="views-field views-field-body"><span class="field-content"><p>Servicio de asesoría en decoración para hacer de tu vivienda un lugar con estilo y elegancia...</p></span>
    </div>      
    <div class="campos-grupo-ciudades views-fieldset" data-module="views_fieldsets">
        <div class="views-field views-field-field-ciudad"><span class="views-label views-label-field-ciudad">Ver Cuidades</span><div class="field-content">Bogotá
    </div>
</div>      
<div class="views-field views-field-view-node"><span class="field-content"><a href="/beneficios/spacios">Más info</a></span>
</div>

**

Thanks to MaximoSL since I got what I wanted with your suggestion and of course everyone who gave me their contributions.

**

javascript html css eventos script

asked by Miguel Angel 22.11.2017 в 17:58

source

3 answers

Delete window.location.href JavaScript android How to do so that the value of a variable can be used in all my application?

score 2 · Answer 1

2

You could add the class to the element and remove it from your brothers $('.field-content').addClass('clasequemesirveporfavor').siblings().removeClass('clasequemesirveporfavor');

answered by 22.11.2017 в 18:31

score 0 · Answer 2

I did not give the task of seeing all your code but you can use identifiers or point to a class, you put in the following way:

$('.class').on('click', function(){$(this).show();});

this is to point to the element that was given click and not all the elements that have the class '.class'

score 0 · Answer 3

Based on your code I would do it in the following way:

By means of the $(this) and the function closest() we can interact only with the elements that are familiar from the <span> that was given the click.

var $ = jQuery.noConflict();

$(document).ready(function() {
    if(document.documentElement.clientWidth < 2000 ){
        $('#block-quicktabs-beneficios .campos-grupo-ciudades .views-field-field-ciudad span').on('click', function(){ 
            if ($(this).closest("#block-quicktabs-beneficios").find('.campos-grupo-beneficios .campos-grupo-ciudades .views-field-field-ciudad > .field-content').is(':hidden')) {
                $(this).closest("#block-quicktabs-beneficios").find('.campos-grupo-ciudades .views-field-field-ciudad span').off('click', 'span');
                $(this).closest("#block-quicktabs-beneficios").find('.campos-grupo-beneficios .campos-grupo-ciudades .views-field-field-ciudad > .field-content').addClass('claseuqemesirveporfavor');
                $(this).closest("#block-quicktabs-beneficios").find('.campos-grupo-beneficios .campos-grupo-ciudades .views-field-field-ciudad > .field-content.claseuqemesirveporfavor').show();
            } else {   
                $(this).closest("#block-quicktabs-beneficios").find('.campos-grupo-beneficios .campos-grupo-ciudades .views-field-field-ciudad > .field-content.claseuqemesirveporfavor').hide(); 
                $(this).closest("#block-quicktabs-beneficios").find('.campos-grupo-beneficios .campos-grupo-ciudades .views-field-field-ciudad > .field-content').removeClass('claseuqemesirveporfavor');
            }
        });  
    }else{
        $('#block-quicktabs-beneficios .campos-grupo-beneficios .campos-grupo-ciudades .views-field-field-ciudad > .field-content').hide();
    }
});

var $ = jQuery.noConflict();