Question

我有一个带有两个img标签的div。点击div我想淡出第二个img而不是第一个。我有几个这个类的div，每个都有一个类imgcarddiv的img标签。我试过了，但没有任何反应。

如何调整此代码？

<div id="card1" class="carddiv">
        <img id="card1imgproxy" src="abc.gif"/>
        <img id="card1img" class="imgcarddiv" src="acespades.png" style="display: none"/>
    </div>    

$(".carddiv").click(function() {
    $("img", this).find(".imgcarddiv").fadeIn("slow");
});

Answer 1

您可以更改为：

$(".carddiv").click(function() {
  $(this).find(".imgcarddiv").fadeIn("slow");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="card1" class="carddiv">
  <img id="card1imgproxy" src="abc.gif" />
  <img id="card1img" class="imgcarddiv" src="acespades.png" style="display: none" />
</div>

Answer 2

您的jquery选择器错误，因为您要查找.carddiv的子项，您只需要使用$(this).find()

$(".carddiv").click(function() {
    $(this).find(".imgcarddiv").fadeIn("slow");
});

如果您担心具有相同.imgcarddiv类的其他元素，并且只想选择可以使用的图像：

    $(this).find("img.imgcarddiv").fadeIn("slow");

在仅选择img元素

时缩小查找选择器

点击下面的代码段，点击图片1 fadeIn img 2

$(".carddiv").click(function() {
    $(this).find("img.imgcarddiv").fadeIn("slow");
});

img { width:30px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<div id="card1" class="carddiv">
        <img id="card1imgproxy" src="http://www.andlil.com/wp-content/uploads/2013/04/R%C3%A8gle-1.png"/>
        <img id="card1img" class="imgcarddiv" src="http://tomreynolds.com/wp/wp-content/uploads/2014/01/2-graphic.png" style="display: none"/>
    </div>

Answer 3

$("img", this)是$(selector, context)语法，其作用类似于$(context).find(selector)。它返回所有img个后代。由于img无法生成img子项，find查询将失败：

$(this).find('img')
       .find(".imgcarddiv") // returns an empty collection
       .fadeIn("slow"); // doesn't do anything

您应该使用filter方法过滤集合（具有特定className的图像）：

$("img", this).filter(".imgcarddiv").fadeIn("slow");

或删除find来电并使用：

$("img.imgcarddiv", this).fadeIn("slow");

Answer 4

确定。这就是我理解您编写的代码的方式。

$(".carddiv").click(function() {
// on click of carddiv div tag
    $("img", this).find(".imgcarddiv").fadeIn("slow");
    // fade in the second div
});

我不喜欢这是怎么写的。我的第一个想法是第一张图像仍然在第二张图像的顶部。我建议进行以下更改（请注意，我更喜欢引用id而不是Jquery选择器中的类）。

$("#card1").click(function() {
    $('#card1img').fadeIn("slow");
    $('#card1imgproxy').fadeOut('slow');
});

使用Jquery在div中为fadeIn选择图像类

4 个答案: