Question

我是Jquery的新手，下面的功能不起作用，我想做的是类似于悬停图片缩略图来显示预览。

我有一群像李＆＃34; onelink＆＃34;和一群＆＃34;一个＆＃34;等等在各个li的悬停时想要切换具有相同名称的范围的类

＆＃13;

function displaydesc(id) {
  id = id.replace('link', '');
  $("#" + id).toggleClass("vis");
}

$(".list>ul>li").hover(
  function() {
    displaydesc($(this).attr("id"));
  });

＆＃13;

.description span {
  position: absolute;
  display: none;
}
.vis {
  display: block !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="list">
  <ul>
    <li id="onelink">one</li>
    <li id="twolink">two</li>
    <li id="threelink">three</li>
    <li id="fourlink">four</li>
  </ul>
</div>
<div class="description">
  <span id="one">Lorem ipsum dolor.</span>
  <span id="two">Tempore tenetur, doloribus.</span>
  <span id="three">Culpa, fuga adipisci.</span>
  <span id="four">Commodi, quisquam, quaerat!</span>
</div>

＆＃13;

Answer 1

在您的jQuery中，使用.heading而不是.list，因为它链接到其他内容。

所以它应该是：

$(".list>ul>li").hover(
function(){
displaydesc($(this).attr("id"));
});

以下是jsFiddle

Answer 2

使用 .list 代替 .Heading

 function displaydesc(id){
    id=id.replace('link','');
    $("#"+id).toggleClass("vis");
}

$(".list>ul>li").hover(
function(){
displaydesc($(this).attr("id"));
});

.description span{
position: absolute;
display: none;
}

.vis{
display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="list">
<ul>

                        <li id="onelink">one</li>
                        <li id="twolink">two</li>
                        <li id="threelink">three</li>
                        <li id="fourlink">four</li>
</ul>
</div>

<div class="description">
    <span id="one">Lorem ipsum dolor.</span>
    <span id="two">Tempore tenetur, doloribus.</span>
    <span id="three">Culpa, fuga adipisci.</span>
    <span id="four">Commodi, quisquam, quaerat!</span>
</div>

JQuery更改跨越各自li的跨度类

2 个答案: