Question

过去几天一直在讨论这个问题，基本上我的功能是我有一个<ul>有7 <li>个元素，然后我有另一个部分有7 { {1}}元素。我正在寻找的是当我将鼠标悬停在其中一个<p>元素上时，它会将相应的<li>元素放入其中。问题是我不能直接使用文本或通过jQuery注入，因为<p>中的内容是对yaml文件的引用。我隐藏了除第一个元素之外的所有元素，它们应该出现在pageload上，然后我猜有一种方法可以隐藏<p>并只显示相应的元素。提前致谢！请查找附上的代码段：

<p>

Answer 1

如果您希望在悬停p时显示相应的li，则可以通过索引或将其与data-*属性相关联来实现。

以下是索引的示例：

我们将mouseenter挂钩到列表中，委托我们只有在与li s
当我们得到事件时，我们得到li相对于其兄弟姐妹的索引
然后我们抓住solutions-text-p div中的段落，确保它们都有hidden类，然后将其从与{{1}相同索引的类中删除}

实时复制 - 为了清晰起见，我使jQuery部分相当冗长：

li

$(".solutions-items").on("mouseenter", "li", function() {
  var index = $(this).index();
  var paras = $(".solutions-text-p p");
  paras.addClass("hidden");
  paras.eq(index).removeClass("hidden");
});

.hidden {
  display: none;
}

这是一个不那么冗长的jQuery版本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="container clearfix">
  <div class="text-center">
    <ul class="solutions-items">
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
      <li>Fourth</li>
      <li>Fifth</li>
      <li>Sixth</li>
      <li>Seventh</li>
    </ul>
  </div>
</section>
<section class="container clearfix">
  <div class="text-center solutions-text-p">
    <p class="">First</p>
    <p class="hidden">Second</p>
    <p class="hidden">Third</p>
    <p class="hidden">Fourth</p>
    <p class="hidden">Fifth</p>
    <p class="hidden">Sixth</p>
    <p class="hidden">Seventh</p>
    <button class="solutions-learnmore-btn">{% yaml reference %}</button>
  </div>
</section>

Answer 2

您可以使用鼠标输入事件和悬停元素的索引来显示/隐藏目标元素

var $ps = $('.solutions-text-p p')
$('.solutions-items li').mouseenter(function() {
  var $cur = $ps.eq($(this).index()).show();
  $ps.not($cur).hide();
})

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="container clearfix">
  <div class="text-center">
    <ul class="solutions-items">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
    </ul>
  </div>
</section>
<section class="container clearfix">
  <div class="text-center solutions-text-p">
    <p class="">1</p>
    <p class="hidden">2</p>
    <p class="hidden">3</p>
    <p class="hidden">4</p>
    <p class="hidden">5</p>
    <p class="hidden">6</p>
    <p class="hidden">7</p>
    <button class="solutions-learnmore-btn">{% yaml reference %}</button>
  </div>
</section>

Answer 3

var entity = context.Entities.FirstOrDefault(x => x.NavigationProperty != null && x.NavigationProperty.Id == 24);

if (entity != null) {
var otherEntity = context
                    .OtherEntities
                    .SingleOrDefault(x =>//Are your sure a FirstOrDefault is not enough ?
                         (x.NavigationPropertyId == entity.NavigationProperty.Id));
}

$('.solutions-items li').mouseenter(function() {
    $("#show_data").text($(this).data("text"));
})

在另一个元素中悬停时更改div内容

3 个答案: