Как написать JavaScript на Drupal с помощью drupal.behaviours

У меня есть сетка, которая содержит две строки и три столбца. В каждом столбце есть изображение, заголовок и подзаголовок. Все картинки имеют один и тот же класс, скажем, "изображение". Я хочу, чтобы картинка менялась во время наведения. У меня есть div с другим изображением (которое я хочу показать при наведении) со свойством display: none;

Это HTML-код:

<div class="row-1">
    <div class="col-1">
        <div class="view-field-image">
            <div class="field-content">
               <img class="image" src="../.." al="">
            </div>
        </div>
        <div class="view-field-collapsed">
            <div class="field-content">
               <img class="collapsed" src="../.." al="">
            </div>
        </div>
     </div>
     <div class="col-2">
     </div>
     <div class="col-3">
     </div>
</div>

Это код js:

(function ($, Drupal) {

  'use strict';

  Drupal.behaviors.hoverEffect = {
    attach: function (context, settings) {

      $('.view-field-image .field-content', context)
        .once()
        .each( function () {
          $(this, context)
          .mouseenter( function () {
            console.log('enter');
            $('image', context).css('display', 'none');
            $('.collapsed', context).css('display', 'block');
          })
          .mouseleave( function () {
            console.log('leave');
            $('image', context).css('display', 'block');
            $('.collapsed', context).css('display', 'none');
          });
        });
    }
  };

})(jQuery, Drupal);

У меня нет ожидаемого результата. При наведении курсора на картинку все картинки показывают скрытую картинку со свернутым классом. Кроме того, изображение с class= "image" не исчезает.

Источник

2 ответа

Поработав некоторое время с javascript, я понял, что вы можете просто сделать это с помощью CSS, Javascript не нужен.

Вам просто нужно добавить класс к столбцам, в случае этого примера это image-col,

.image-col {
  width: 200px;
  height: 100px;
  position: relative;
}
.image-col > div {
  position: absolute;
  width: 100%;
  height: 100%;
}
.image-col img {
  width: 100%;
  height: 100%;
}
.image-col .view-field-image {
  z-index: 10;
}
.image-col .view-field-collapsed {
  z-index: 1;
}
.image-col:hover .view-field-image {
  display: none;
}
<div class="row-1">
    <div class="col-1 image-col">
        <div class="view-field-image">
            <div class="field-content">
               <img class="image" src="https://searchengineland.com/figz/wp-content/seloads/2015/09/google-logo-green2-1920.jpg" al="">
            </div>
        </div>
        <div class="view-field-collapsed">
            <div class="field-content">
               <img class="collapsed" src="https://searchengineland.com/figz/wp-content/seloads/2015/11/google-stars-reviews-rankings5-ss-1920.png" al="">
            </div>
        </div>
     </div>
     <div class="col-2 image-col">
     </div>
     <div class="col-3 image-col">
     </div>
</div>

После публикации я увидел, что проблема, вероятно, не в том, как используется переменная контекста.

Но я оставляю ответ здесь по запросу ОП.

Оригинальный (неправильный) ответ

Вы используете неверную контекстную переменную.
контекст будет то, что jquery изучает, чтобы найти элемент.
например.
$('.something', context)
jquery будет искать ".something" внутри контекста.

Ваш код использует: $('image', context).css('display', 'none'); но, поскольку это в цикле, вы действительно хотите, чтобы контекст был текущим элементом в цикле.
Таким образом, каждый ваш цикл должен выглядеть так:

.each( function (index, element) {
  let $this = $(this);
  .mouseenter( function () {
    // Search for image in the current looping element.
    $('image', $this).css('display', 'none');
    // Search for all collapsed
    $('.collapsed', context).css('display', 'block');
  })
Источник 
   (function ($, Drupal, drupalSettings) {

        Drupal.behaviors.YOURBEHAVIOR = {

            attach: function (context, settings) {

                $('.YOURCLASS', context).on('YOUREVENT', function () {

            alert('TEST STRING...');  //Your javascript code...

            });

            }
        };
    })(jQuery, Drupal, drupalSettings);
Источник
Другие вопросы по тегам