如何使用jQuery隐藏/显示悬停时的某些div？

Question

我已经在<ul>中嵌入了链接列表

<ul class="list">
    <li id="1"><a href="url1">Result 1</a></li>
    <li id="2"><a href="url2">Result 2</a></li>
    <li id="3"><a href="url3">Result 3</a></li>
    <li id="4"><a href="url4">Result 4</a></li>
</ul>

我还有另一个<ul>，它显示与结果列表一致的信息：

<ul class="summary">
    <li id="1"><p>Result 1 Info</p></li>
    <li id="2"><p>Result 2 Info</p></li>
    <li id="3"><p>Result 3 Info</p></li>
    <li id="4"><p>Result 4 Info</p></li>
</ul>

如何将其悬停在li列表中的位置，并且只显示与li悬停相关的摘要中的li？这是我的jQuery代码：

$("ul.summary li").hide();
$("ul.summary li:first-child").show();

$("ul.lsit li").hover(function(){
    var id = $(this).attr("id");
    $("ul.summary li#"+id).show();
})

Answer 1

id应该是唯一的。相反，你可以借助 eq() ， index() 和 siblings()

＆＃13;

＆＃13;

$("ul.summary li").hide();
$("ul.summary li:first-child").show();

$('ul.list li').hover(function() {
  $('ul.summary li').eq($(this).index())
    // using eq() you can select element using index
    // index() returns index based on it's siblings
    .show()
    //show element using show()
    .siblings().hide();
    // use siblings() to get all siblings and hide them using hide()
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list">
  <li><a href="url1">Result 1</a>
  </li>
  <li><a href="url2">Result 2</a>
  </li>
  <li><a href="url3">Result 3</a>
  </li>
  <li><a href="url4">Result 4</a>
  </li>
</ul>
<ul class="summary">
  <li>
    <p>Result 1 Info</p>
  </li>
  <li>
    <p>Result 2 Info</p>
  </li>
  <li>
    <p>Result 3 Info</p>
  </li>
  <li>
    <p>Result 4 Info</p>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

更新：如果您想更改订单，则可以设置一些自定义属性并执行类似

的操作

＆＃13;

＆＃13;

$("ul.summary li").hide();
$("ul.summary li:first-child").show();

$('ul.list li').hover(function() {
  $('ul.summary li').eq($(this).data('target'))
    // using eq() you can select element using index
    // get custom attribute value using data()
    .show()
    //show element using show()
    .siblings().hide();
    // use siblings() to get all siblings and hide them using hide()
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list">
  <li data-target=3><a href="url1">Result 1</a>
  </li>
  <li data-target=2><a href="url2">Result 2</a>
  </li>
  <li data-target=1><a href="url3">Result 3</a>
  </li>
  <li data-target=0><a href="url4">Result 4</a>
  </li>
</ul>
<ul class="summary">
  <li>
    <p>Result 1 Info</p>
  </li>
  <li>
    <p>Result 2 Info</p>
  </li>
  <li>
    <p>Result 3 Info</p>
  </li>
  <li>
    <p>Result 4 Info</p>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;