Javascript 如何使用相同名称的多个类使用相同的JS函数？

我试图让这个逻辑对同一类的多个元素起作用。我有一个按类别分组的导航元素列表。我多次使用同一个类，但是我实现的Javascript逻辑只适用于第一个类

我怎样才能解决这个问题

HTML

<ul class="list_content all">
<div>
  <a class="ozone" href="#" data-image="https://thepropertyagency.com.au/upload/projects/ozone-s1.jpg">
    <li>Ozone Residences</li>
  </a>
</div> 
<div class="ozone_caption">
  <div class="caption_grid">
    <h1>Cronella NSW<br>Residential</h1>
    <h1><br>2018</h1>
  </div>
</div>
</ul>

<ul class="list_content residential">
<div>
  <a class="ozone" href="#" data-image="https://thepropertyagency.com.au/upload/projects/ozone-s1.jpg">
    <li>Ozone Residences</li>
  </a>
</div> 
<div class="ozone_caption">
  <div class="caption_grid">
    <h1>Cronella NSW<br>Residential</h1>
    <h1><br>2018</h1>
  </div>
</div>
</ul>

克洛内拉新南威尔士
住宅区

2018年


克洛内拉新南威尔士
住宅区

2018年

JavaScript

$(".ozone").mouseenter(function() {
  if ($(this).parent('div').children('div.image').length) {
    $(this).parent('div').children('div.image').show();
  } else {
    var image_name=$(this).data('image');
    var imageTag='<div class="image" style="position:absolute; right: 50px; bottom: 50px">'+'<img src="'+image_name+'" alt="image" height="500" />'+'</div>';
    $(this).parent('div').append(imageTag);
  }
});

$(".ozone").mouseleave(function() {
  $(this).parent('div').children('div.image').hide();
});

$('.ozone').hover(
  function() {
    $('.ozone_caption').css('opacity', '1')
  }, 
  function() { 
    $('.ozone_caption').css('opacity', '0')
  });

$（“.ozone”）.mouseenter（函数（）{
if（$（this）.parent（'div'）.children（'div.image'）.length）{
$（this）.parent（'div'）.children（'div.image'）.show（）；
}否则{
var image_name=$（this）.data（'image'）；
var imageTag=''+''+''；
$（this.parent（'div'）.append（imageTag）；
}
});
$（“.ozone”）.mouseleave（函数（）{
$（this）.parent（'div'）.children（'div.image'）.hide（）；
});
$（'.ozone'）。悬停(
函数（）{
$（'.ozone_caption'）.css（'opacity'，'1'））
}, 
函数（）{
$（'.ozone_caption'）.css（'opacity'，'0'））
});

您可以使用来迭代类的所有实例

请注意，您还必须改变修改

ozone\u标题

实例的方法。我假设您只想对关联的

ozone\u标题

进行操作，而不是对所有标题进行操作

$('.ozone').each(function() { 
  $(this).mouseenter(function() {
      if ($(this).parent('div').children('div.image').length) {
          $(this).parent('div').children('div.image').show();
      } else {
          var image_name=$(this).data('image');
          var imageTag='<div class="image" style="position:absolute; right: 50px; bottom: 50px">'+'<img src="'+image_name+'" alt="image" height="500" />'+'</div>';
          $(this).parent('div').append(imageTag);
      }
  });

  $(this).mouseleave(function() {
      $(this).parent('div').children('div.image').hide();
  });

  $(this).hover(
    function() {
      $(this).parent('div').next('.ozone_caption').css('opacity', '1')
    }, 
    function() { 
      $(this).parent('div').next('.ozone_caption').css('opacity', '0')
      }
  );
});

$（'.ozone'）。每个（函数（）{
$（this.mouseenter（function（））{
if（$（this）.parent（'div'）.children（'div.image'）.length）{
$（this）.parent（'div'）.children（'div.image'）.show（）；
}否则{
var image_name=$（this）.data（'image'）；
var imageTag=''+''+''；
$（this.parent（'div'）.append（imageTag）；
}
});
$（this.mouseleave（function（））{
$（this）.parent（'div'）.children（'div.image'）.hide（）；
});
$（此）。悬停(
函数（）{
$（this）.parent（'div'）.next（'.ozone_caption'）.css（'opacity'，'1'））
}, 
函数（）{
$（this）.parent（'div'）.next（'.ozone_caption'）.css（'opacity'，'0'））
}
);
});

我将为您发布此答案，但我仍然不知道您到底想做什么。根据您提供的内容，这应该是可行的，但您必须根据自己的需要进行定制。如果不指定

position:relative，请记住绝对定位在父级上，它将使用
正文


$（“.ozone”）.mouseenter（函数（）
{
var image=$（this.sibbines（'div.image'）；
if（image.length）
{
image.show（）；
}
其他的
{
var image_name=$（this）.data（'image'）；
var imageTag=''+''+''；
$（this.parent（'div'）.append（imageTag）；
}
});
$（“.ozone”）.mouseleave（函数（）
{
$（this.sides（'div.image'）.hide（）；
});
$（'.ozone'）。悬停（函数（）
{
$（this）.parent（）同级（'.ozone_caption'）.toggle（）；
});


克洛内拉新南威尔士
住宅区

2018年


克洛内拉新南威尔士
住宅区

2018年
请同时发布页面的相关标记（HTML）。“我正在尝试让此函数工作…”告诉我们您的代码应该做什么。当您将鼠标悬停在每个类上时，它会显示特定的图像和标题，它只适用于标记中的第一个类，而不适用于相同类名之后的任何其他类，只在标记中看到一个类属性。太好了！多谢各位