Question

我试图使这种逻辑适用于同一类的多个元素。我有一个按类别分组的导航元素列表。我多次使用同一个类，但是我实现的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>

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')
  });

Answer 1

您可以使用.each() function遍历ozone类的所有实例。

请注意，您还必须更改修改ozone_caption实例的方法。我假设您只想操作相关的ozone_caption而不是全部操作。

$('.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')
      }
  );
});

Answer 2

将为您发布此答案，但我仍然不知道您到底想做什么。根据您提供的内容，此方法应该有效，但必须根据需要对其进行自定义。请记住绝对位置，如果您未在父级上指定C:\Users\evaim>pip install -r requirements.txt Could not open requirements file: [Errno 2] No such file or directory: 'requirements.txt' You are using pip version 19.0.3, however version 19.2.3 is available. You should consider upgrading via the 'python -m pip install --upgrade pip' command. C:\Users\evaim>python -m pip install --upgrade pip Collecting pip Downloading https://files.pythonhosted.org/packages/30/db/9e38760b32e3e7f40cce46dd5fb107b8c73840df38f0046d8e6514e675a1/pip-19.2.3-py2.py3-none-any.whl (1.4MB) 100% |████████████████████████████████| 1.4MB 2.9MB/s Installing collected packages: pip Found existing installation: pip 19.0.3 Uninstalling pip-19.0.3: Successfully uninstalled pip-19.0.3 Successfully installed pip-19.2.3 C:\Users\evaim>pip install -r requirements.txt ERROR: Could not open requirements file: [Errno 2] No such file or directory: 'requirements.txt'，它将使用position: relative;。

body

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

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

$('.ozone').hover(function() 
  {
    $(this).parent().siblings('.ozone_caption').toggle();
});

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

2 个答案: