Как сделать появление содержимого в месте клика (jQuery)?

Question

Нужно сделать так, чтобы элемент появлялся при клике на картинку в том месте где произведен был клик. А также не знаю как исправить следующее: при клике на одну картинку, сразу во всех появляется элемент, а надо чтобы оно появлялось только на той на которой был произведен клик. Как сделать?

Ссылка на проект: https://plupiks.github.io/Webovio-Full-Landing/

const quote = $('.quote')
const featuresImg = $('.features-block__image')
const windowWidth = $('window').width()
const mediaQuery = window.matchMedia('(max-width: 1200px)')

if (quote.hasClass('quote-disable')) {
  featuresImg.on('click', function(){
    clickPos();
  });
}

function clickPos() {
  featuresImg.on('click', function(e){
    e.stopPropagation();
    x = e.pageX;
    y = e.pageY
  })
}

Answer 1

Есть вариант проще, появляющиеся блоки с текстами можно так же стилизовать как нужно

$('.features-block__image').click(function(e) {
  var xClick = e.pageX - $(this).offset().left;
  var yClick = e.pageY - $(this).offset().top;
  $(this).next('.fetures-block__quote').css({
    "top": yClick,
    "left": xClick
  }).toggleClass('quote-active');
})

.features-block__left {
  position: relative;
}

.fetures-block__quote {
  position: absolute;
  background: white;
  width: 50%;
  padding: 10px;
  z-index: 1;
}

.quote-disable {
  display: none;
}

.quote-active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="features-block__left">
  <div class="features-block__image" id="features-img">
    <img src="https://i.ibb.co/JB2NWC4/leopard-g5d8314f7f-640.jpg" alt="">
  </div>
  <div class="fetures-block__quote quote quote-disable">
    <div class="quote__wrapper">
      <p class="quote__text">
        “In my history of working with trade show vendors, I can honestly say that there is not one company that I've ever worked with that has better service than Exhibit Systems.”
      </p>
      <div class="quote__about">
        <div class="quote__img"></div>
        <div class="quote__about-inf">
          <h3 class="quote__title">Angel Armstrong</h3>
          <span class="quote__descr">Founder &amp; CEO, Google</span>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="features-block__left">
  <div class="features-block__image" id="features-img">
    <img src="https://i.ibb.co/tBVh7X8/street-g385867f88-640.jpg" alt="">
  </div>
  <div class="fetures-block__quote quote quote-disable">
    <div class="quote__wrapper">
      <p class="quote__text">
        “In my history of working with trade show vendors, I can honestly say that there is not one company that I've ever worked with that has better service than Exhibit Systems.”
      </p>
      <div class="quote__about">
        <div class="quote__img"></div>
        <div class="quote__about-inf">
          <h3 class="quote__title">Angel Armstrong</h3>
          <span class="quote__descr">Founder &amp; CEO, Google</span>
        </div>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как сделать появление содержимого в месте клика (jQuery)?

Ответы (1 шт):