Hover "data-id" not working

1

Hello -
I am having a problem with a website that I think has a pretty simple solution, but I can’t see it for the life of me. I re-wrote some code on a page to make it simpler and faster, and there it works:

PHP

<?php

$continents = [
  'africa',
  'america',
  'asia',
  'europe',
  'oceania',
];

?>

<?php snippet('header') ?>
<div class="continents">

  <?php foreach($continents as $continent): ?>
    <div class="continent list-item" data-id="<?php echo $continent; ?>">
      <span><a href="<?= url($continent) ?>"><h1><?php echo strtoupper($continent); ?></h1></a></span>
    </div>
  <?php endforeach; ?>

  <?php foreach($continents as $continent): ?>
  <?php $image = page($continent)->coverimage()->toFile(); if (!$image) continue; ?>
    <div class="continent-image list-item-image" data-id="<?php echo $continent; ?>" <?= $image ? 'style="background-image: url(' . $image->url() . ')"' : null ?>></div>
  <?php endforeach; ?>

</div>

JS

$(document).ready(function() {

  var $body = $('body');
  var $items = $('.list-item');
  var $itemImages = $('.list-item-image');

  $items.hover(
    function(){
      var $this = $(this);
      var id = $this.attr("data-id");
      var $item = $items.filter("[data-id=" + id + "]");
      var $itemImage = $itemImages.filter("[data-id=" + id + "]");
      $items.not($item).addClass('hidden');
      $itemImage.addClass('active');
    },
    function(){
      $items.removeClass('hidden');
      $itemImages.removeClass('active');
    },
  );

});

CSS

.continent.hidden {
  opacity: 0;
}

.continent-image {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-size: cover;
  transition: opacity 100ms ease-in-out;
  opacity: 0;
}
.continent-image.active {
  opacity: 1;
}

The basic idea is that when you hover on one of the elements the other ones get hidden and the background photo changes. The code above works. Then I tried applying it to another page, which is slightly more complicated but essentially the same:

PHP

<?php $image = $page->coverimage()->toFile(); ?>
  <body <?= $image ? 'data-url="' . $image->url() . '"' : null ?>>



    <div class="countrieslist">

      <?php foreach($page->children() as $country): ?>

        <div class="country list-item <?= $country->tags() ?>" data-id="<?php echo $country; ?>">
          <span><a href="<?= url($country) ?>"><h2><?php echo (html($country->title())); ?></h2></a></span>
          <svg>
            <circle stroke="black" stroke-width="1" fill=none  />
            <text x="48%" y="50%" text-anchor="middle" fill="black" dy=".32em" font-family='alpina_ext_th_it'><?= $country->number() ?></text>
          </svg>
        </div>

      <?php endforeach; ?>

      <?php foreach($page->children() as $country): ?>
      <?php $image = page($country)->coverimage()->toFile(); if (!$image) continue; ?>
        <div class="country-image list-item-image" data-id="<?php echo $country; ?>" <?= $image ? 'style="background-image: url(' . $image->url() . ')"' : null ?>></div>

JS

$(document).ready(function(){

  var $body = $('body');
  var $items = $('.list-item');
  var $itemImages = $('.list-item-image');

  $items.hover(
    function(){
      var $this = $(this);
      var id = $this.attr("data-id");
      var $item = $items.filter("[data-id=" + id + "]");
      var $itemImage = $itemImages.filter("[data-id=" + id + "]");
      $items.not($item).addClass('hidden');
      $itemImage.addClass('active');
    },
    function(){
      $items.removeClass('hidden');
      $itemImages.removeClass('active');
    },
  );


});

CSS

.country-image.active {
  opacity: 1;
}

.country.hidden {
  opacity: 0;
}

However, in this second instance the hover doesn’t work. I am getting the following error in the console if it helps:

Uncaught Error: Syntax error, unrecognized expression: [data-id=america/canada]

(america would be the page we are on and canada would be $page->children() as $country

I don’t understand what’s not working. And why is it not just pulling the subpage name but the current page as well as “data-id”? Is that why it’s giving me problems?

Sorry for the long and complicated question, thanks in advance for the help.

2

Is tha the only one with a / in the middle? Thats potentially the problem. Try wrapping them in qoutes.

[data-id="america/canada"]

and when you hit them in the vars, use single qoutes on the outside and inside beacause the attribute has qoutes.

var $itemImage = $itemImages.filter('[data-id="' + id + '"]');
3

Plus here you are echoing the page object. I’d be more specific and print the id explicitly instead of relying on the magic __string() method, because this behavior might change.