1

我正在尝试仅在三个类之一存在时才使用 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" />');
    }
4

2 回答 2

4

而不是 if 尝试使用过滤器：

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

这将找到所有带有 donut 类和 plus、minus 或 plus-minus 的图形，然后找到其中带有一个 figure-value 类的元素并附加图像。

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/

于 2013-04-08T20:50:02.183 回答
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元素中插入一个图像。

于 2013-04-08T20:46:07.360 回答