Question

我刚刚开始学习jquery，只有很少的JS知识（长话短说 - 我被告知它有助于提供快捷方式 - 如果我有时间我会正确学习JS）。

有了这个，我试图基本上创建一个滚动的选框或多帧英雄横幅，无论你想要什么。我不希望任何自动化，我正在寻找最终用户点击按钮/图像来更改选框图像。

我的jquery一直存在问题，而且我想请求我正在努力解决的另一件作品的帮助，这隐藏了当前正在展示的图片。

我当前的jquery有什么问题，它不能正常工作？
一个。文件加载在页面顶部
湾当我执行这个（$（“＃imgd2”）。fadeIn;）它在firebug中工作的jquery的一部分，但在click函数中它没有...
我怎样才能查看当前显示的图像，将其隐藏并淡入相应的图像。例如，默认显示img1，如果我点击img3，如何在选框3中淡入之前隐藏图像1？

// html - 原谅懒惰 //我默认显示第一张图片，并将其他两张图片隐藏在页面上。

<div style="width: 100%; height: 450px;" id="img-container">

<div id="imgd1" style="width: 432px; height: 398px; position: absolute; background-image: url(img1.jpg); background-size: cover;"></div>
<div id="imgd2" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(img2.jpg); background-size: cover;"></div>
<div id="imgd3" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(img3.jpg); background-size: cover;"></div>

<div style="position: absolute; top: 438px; left: 322px;" id="bttns">
<img id="img1" src="active.png">
<img id="img2" src="active.png">
<img id="img3" src="active.png"> 
</div>

</div>

// jquery的
//点击特定按钮，我想淡出相应的图像

$("#img1").click(function () {
$("#imgd1").fadeIn;
});

$("#img2").click(function () {
$("#imgd2").fadeIn;
});

$("#img3").click(function () {
$("#imgd3").fadeIn;
});

提前感谢！

Answer 1

它必须有一个括号： - ）

$("#imgd5").fadeIn();

问题＃2 ..我的小提琴http://jsfiddle.net/5PP4z/2/

Answer 2

fadeIn是一个函数，你需要调用它

$("#imgd3").fadeIn();

不是为每个imgd元素编写点击处理程序，而是可以定位所有元素（通过添加类imgd）并使用data-*属性来指定图像（data-target属性，具有图像的id）将被显示。还要为所有图像添加一个类img，以便我们可以轻松隐藏它。

<div style="width: 100%; height: 450px;" id="img-container">
    <div id="imgd1" class="imgd" style="width: 432px; height: 398px; position: absolute; background-image: url(//placehold.it/432x398/ff0000); background-size: cover;"></div>
    <div id="imgd2" class="imgd" data-target="#img2" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(//placehold.it/432x398/00ff00); background-size: cover;"></div>
    <div id="imgd3" class="imgd" data-target="#img3" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(//placehold.it/432x398/0000ff); background-size: cover;"></div>
    <div style="position: absolute; top: 438px; left: 322px;" id="bttns">
        <img id="img1" class="img" data-target="#imgd1" src="//placehold.it/32/ff0000" />
        <img id="img2" class="img" data-target="#imgd2" src="//placehold.it/32/00ff00" />
        <img id="img3" class="img" data-target="#imgd3" src="//placehold.it/32/0000ff" />
    </div>
</div>

然后

jQuery(function ($) {
    var $imgds = $('.imgd');
    $('.img').click(function () {
        var $target = $($(this).data('target'));
        $imgds.not($target).hide();
        $target.stop(true, true).fadeIn();
    })
});

演示：Fiddle

jquery onclick fadein效果

2 个答案: