jquery - 选择一个包含 div 来显示背景图像

Question

我正在工作的网页使用基本的 CSS 效果，当用户将鼠标悬停在链接上时会显示图像。

HTML 看起来像这样:

<div id="container">
    <ul> 
        <li>
            <a href="" id="first-link"><div id="first-image"></div>First link text</a>
            <a href="" id="second-link"><div id="second-image"></div>Second link text</a>
            <a href="" id="third-link"><div id="third image"></div>Third link text</a>
        </li>
    </ul>
</div> <!-- #container -->

a 内的每个 div 都在 CSS 中应用了一个背景图像。下面是当链接悬停在上面时使图像出现的 CSS:

#first-link:hover #first-image,
#second-link:hover #second-image,
#third-link:hover #third-image {
    display:block;
}

现在我想添加 jQuery:我希望脚本选择一个随机 a 及其包含的 div (就像“强制”鼠标悬停一样)。

为了能够做到这一点，我将 .jquery-select 类添加到 HTML，这将允许我选择我想要的 a:

<div id="container">
    <ul> 
        <li>
            <a href="" id="first-link" class="jquery-select"><div id="first-image"></div>First link text</a>
            <a href="" id="second-link" class="jquery-select"><div id="second-image"></div>Second link text</a>
            <a href="" id="third-link" class="jquery-select"><div id="third image"></div>Third link text</a>
        </li>
    </ul>
</div> <!-- #container -->

我还将 .hovered 类添加到 CSS 中:

#first-link:hover #first-image,
#second-link:hover #second-image,
#third-link:hover #third-image,

#first-link.hovered #first-image,
#second-link.hovered #second-image,
#third-link.hovered #third-image {
    display:block;
}

然后我用 JavaScript 选择一个随机数:

var random = Math.floor(Math.random()*3);

我想将 .hovered 类添加到随机选择的 a 中，其中包含 div:

$("a.jquery-select").eq(random).children("div").addClass("hovered");

这就是我的努力惨败的地方，因为不知何故没有选择任何内容，并且随机图像也没有显示。要么是我的选择错误，要么是我将 .hovered 类分配给了 CSS 或 jQuery 中的错误元素，或者是以上所有情况 - 我不知道如何使其工作。

所以，我需要更了解这些事情的人的建议。我该如何让它发挥作用？

Answer 1

使用$("a.jquery-select").eq(random).children("div").show();

#firstlink:hover #first, #secondlink:hover #second, #thirdlink:hover #third {
    display:block !important;
    width:100px;
    height: 100px;
}

function temp(){
    $("a.jquery-select").eq($(window).data("rand")).children("div").hide();

}
var random = Math.floor(Math.random()*3);
$(window).data("rand",random);
$("a.jquery-select").eq(random).children("div").show();
$("a.jquery-select").mouseenter(temp);

<强> DEMO JSFIDDLE

<强> DEMO JSBIN

根据下面的评论，您将需要与此类似的代码...

HTML

<div id="image" style="width:100px;height: 100px"></div>
<div id="container">
    <ul> 
        <li>
            <a href="#" id="first-link" class="jquery-select">First link text</a>
            <a href="#" id="second-link" class="jquery-select">Second link text</a>
            <a href="#" id="third-link" class="jquery-select">Third link text</a>
        </li>
    </ul>
</div>

JQUery JavaScript

$(document).ready(function(){
var images=["http://www.w3schools.com/cssref/paper.gif","http://www.w3schools.com/cssref/img_flwr.gif","http://www.w3schools.com/cssref/img_tree.gif"];

      var random = Math.floor(Math.random()*3);

   $("a.jquery-select").mouseenter(function () {
    var div=$("#image");
    $("a.jquery-select").css("border","none");
    $(this).css("border", "1px solid #ff0000");
    div.css("background","url("+images[$(this).index()]+")");
    div.show();
  }).mouseleave( function () {
         $(this).css("border", "none")
    });
  $("#image").css("background-image","url("+images[random]+")");
   $("a.jquery-select").eq(random).css("border", "1px solid #ff0000");
});

<强> NEW DEMO JSBIN

<强> NEW DEMO JSFIDDLE

以一定的时间间隔随机选择链接

setInterval(function(){
  var random = Math.floor(Math.random()*3);
      $("#image").css("background-image","url("+images[random]+")");
      $("a.jquery-select").css("border","none");
      $("a.jquery-select").eq(random).css("border", "1px solid #ff0000");
},1000);

而不是上面代码中的最后两行...