Question

我试图使用jQuery仅在三个类中的一个存在时才将图像标记附加到div，但它似乎不起作用。它要么附加到所有元素，要么根本不附加。

以下是HTML代码：

<figure class="donut minus">
    <div class="figure-value"></div>
</figure>

这是jQuery：

if ($("figure.donut").hasClass("minus") || $("figure.donut").hasClass("plus") || $("figure.donut").hasClass("plus-minus")) {
        $(".figure-value").append('<img src="../images/schoolProfile/donut-plus-minus.png" />');
    }

Answer 1

而不是尝试使用过滤器：

$("figure.donut")
    .filter(".plus, .minus, .plus-minus")
    .find(".figure-value")
    .append('<img src="../images/schoolProfile/donut-plus-minus.png" />');

这将找到所有带有甜甜圈类型的图形，加上减号或正负值，然后在其中找到带有一类图形值的元素并附加图像。

JSFiddle示例 - http://jsfiddle.net/7FUam/

在回答下面的评论时，更改附加以创建一个jQuery对象并将css应用于：

.append($('<img src="../images/schoolProfile/donut-plus-minus.png" />')
            .css({"top": -100+"px", "left": 0+"px"}));

更新示例 - http://jsfiddle.net/infernalbadger/7FUam/1/

Answer 2

在这部分代码中：

$(".figure-value").append('<img src="../images/schoolProfile/donut-plus-minus.png" />');

您正在选择类别为.figure-value的所有元素并附加图片。

解决方案是使用$.each本身（$.each允许您迭代元素集合并执行操作：

$('figure').each(function(){
    if ( $(this).hasClass('plus') ) {
        $(this).find('.figure-value')
        .append('<img src="http://placehold.it/125x125" />');   
    }
});

这是一个小提琴：http://jsfiddle.net/mV56V/1/

此示例将采用每个figure元素并检查它是否具有.plus类 - 如果元素具有.plus类，则会在其中插入一个图像的相对.figure-value 1}}元素。

为什么只有在存在某些类时才能附加图像？

2 个答案: