Question

我有以下代码，我通过显示强度标题和强度摘要的部分来渲染

<div id="strengths" class="row">
  <% FR_STRENGTHS.each do |strength| %>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div >
        <h3 class="jobtitle text-center">  <%= strength[1]["title"] %></h3>
        <div class="text-justify strength_summary">
          <p> <%= strength[1]["summary"] %></p>
        </div>
      </div>
    </div>
  <% end %>
</div>

优势的详细信息在yml文件中用于翻译目的（我有与上述英语语言待定参数相同的代码）。我想隐藏强度摘要并在用户使用Jquery悬停强度标题时显示它，但我无法使用它。

在jQuery传播文档之后我使用了这个js代码：

$(document).ready(function() {
  $('#strengths').on("mouseenter", "h3",
    function() {
      $('.strength_summary').slideDown();
    },
    function() {
      $('.strength_summary').slideUp();
    }
  );
});

在任何情况下，我都不认为使用一个类作为＆＃34; strength_summary＆＃34;的选择器。我会假设所有部分在悬停在任何h3上时会滑落？但是使用ID是不可能的...... 谢谢你的帮助！

Answer 1

您需要使用遍历功能，这样您才能在当前元素之后滑动DIV。另外，你不能给.on()两个函数;如果您希望在停止悬停时运行其他功能，请绑定mouseleave事件。

$("#strengths").on({
  "mouseenter": function() {
    $(this).next(".strength_summary").slideDown();
  },
  "mouseleave": function() {
    $(this).next(".strength_summary").slideUp();
  }
}, "h3");

Jquery事件不会触发通过循环生成的元素

1 个答案: