如何使用jQuery隐藏/显示鼠标悬停?

I've got a list of links embedded in a <ul> as so

我在

<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>

And I have another <ul> that displays information that goes with the results list:

我还有一个

<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>

How do I make it to where I can hover over a li in list and it only displays the li in summary that goes with the respective li hover? This is my jQuery code:

我如何使它到达我可以在列表中悬停在一个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();
})

1 个解决方案

#1

id should be unique. Instead you can do something like this with help of eq() , index() and siblings()

id应该是唯一的。相反，您可以使用eq()、index()和sibling()来完成类似的操作

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

<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>

UPDATE : If you want to change the order then you can set some custom attribute and do something like

更新:如果您想更改订单，那么您可以设置一些自定义属性，并执行类似的操作

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

<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>

#1