Question 11077 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to replace one element with another on hover and click – Jquery

I have two addresses and two google maps on which they are shown. By default, the first card is displayed. I don’t need that when hovering, the map that corresponds to it appears on the address. You also need to implement the same functionality when clicking on the address. That is, so that there is a hover and a click. I added data-map attributes to the elements to implement this functionality. But I can’t figure out how to hide another card and show the place of the one that corresponds to the date attribute. How can I do this.

jQuery(document).ready(function($) {
  $('.address-item').on({
    mouseenter: function() {
      if ($(this).attr("data-map") == $(".map-item").attr("data-map")) {
        $(".map-item").fadeIn();
      }
    },
    mouseleave: function() {
      if ($(this).attr("data-map") !== $(".map-item").attr("data-map")) {
        $(".map-item").fadeOut();
      }
    }
  })
});
.maps .map-item:nth-child(2) {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="address-item" data-map="map1">Address 1</div>

<div class="address-item" data-map="map2">Address 2</div>

<div class="maps">
  <div class="map-item" data-map="map1">Map 1</div>

  <div class="map-item" data-map="map2">Map 2</div>
</div>
Tags:

2

Answers


  1. 0

    Your logic basically says "if the hovered element’s data attribute equals all map items’ data attributes, fade in all map items".

    Obviously that’s not right, so we’ll simplify to "fade in the map item having a data attribute matching that of the hovered element".

    This leaves a fade overlap unaddressed, but that’s more a layout issue than one of scripting.

    Note that I also updated your CSS to allow for more elements.

    jQuery(document).ready(function($) {
  $('.address-item').on({
    mouseenter: function() {
      $('.map-item[data-map="' + $(this).attr('data-map') + '"]').fadeIn();
    },
    mouseleave: function() {
      $('.map-item[data-map="' + $(this).attr('data-map') + '"]').fadeOut();
    }
  })
});
    .maps .map-item:not(:first-child) {
  display: none;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="address-item" data-map="map1">Address 1</div>

<div class="address-item" data-map="map2">Address 2</div>

<div class="maps">
  <div class="map-item" data-map="map1">Map 1</div>

  <div class="map-item" data-map="map2">Map 2</div>
</div>
    Login or Signup to reply.
  2. 0

    For show only one of the element you should add class and remove class active from elements then you can modify fade them in every events that you need

    jQuery(document).ready(function ($) {
    $('.address-item')
      .on('click mouseenter', function () {
        var element = $(this).attr("data-map");
        $('.maps .map-item').each(function (index,map) {
          $(map).attr('data-map') == element ? $(map).addClass('active') : $(map).removeClass('active');
        })
      })
  });
      .address-item{
    display: inline-block;
  }
  .maps .map-item{
    display: none;
  }
  .maps .map-item.active {
    display: block!important;
  }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="address-item" data-map="map1">Address 1</div>

<div class="address-item" data-map="map2">Address 2</div>

<div class="maps">
  <div class="map-item active" data-map="map1">Map 1</div>

  <div class="map-item" data-map="map2">Map 2</div>
</div>

    UPDATE
    And also for keep your animation you can change code like as below

      jQuery(document).ready(function ($) {
    $('.address-item')
      .on('click mouseenter', function () {
        var element = $(this).attr("data-map");
        $('.maps .map-item').each(function (index,map) {
          $(map).attr('data-map') == element ? $(map).fadeIn() : $(map).fadeOut();
        })
      })
  });
      .maps .map-item{
    display: none;
  }
  .maps .map-item:nth-child(1){
    display: block;
  }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="address-item" data-map="map1">Address 1</div>

<div class="address-item" data-map="map2">Address 2</div>

<div class="maps">
  <div class="map-item active" data-map="map1">Map 1</div>

  <div class="map-item" data-map="map2">Map 2</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search