Question

我在使用jQuery来定位正确的div时遇到了一些麻烦。我正在创建一个水平条形图小部件，并且我希望值标签在小于10％时（因为可读性）碰到条形图的右侧。

看起来我没有正确定位 barValue div，因为它没有像它应该的那样碰撞＆lt; 10％的值。

enter image description here

$(function() {
    $(".barChart").each(function() {
        $(this).html("<div class='barLabel'>" 
            + $(this).data('title') + 
        "</div><div class='barContainer'><div class='bar' style='width:" 
            + $(this).data('value') + 
        "%'><div class='barValue'>" 
            + $(this).data('value') + "%" 
            + "</div></div></div>");
        if($(this).data('value') <= 10) {
            $(this, ".barContainer .barValue").css({
                "margin-right": "-20px",
                "color": "#000",
            });
        }
    });
});

<div class="barChart" data-value="64" data-title="Apples"></div>
<div class="barChart" data-value="6" data-title="Oranges"></div>

.barChart {
    width:100%;
    margin:5px;
}
    .barChart .barLabel {
        float:left;
        font-size:12px;
        color:#BBB;
    }
    .barChart .barContainer {
        width:-webkit-calc(100%-85);    
        margin-left:75px;

        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        height:15px;
        padding:1px;
        border:1px solid #EEE;
    }
    .bar {
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        height:100%;

        border:1px solid #FF0000;
        background: #CC0000; /* Old browsers */
        background: -moz-linear-gradient(top, #FF0000 0%, #CC0000 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FF0000), color-stop(100%, #CC0000)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #FF0000 0%, #CC0000 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #FF0000 0%, #CC0000 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #FF0000 0%, #CC0000 100%); /* IE10+ */
        background: linear-gradient(to bottom, #FF0000 0%, #CC0000 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0000', endColorstr='#CC0000', GradientType=0 ); /* IE6-9 */
    }
    .barValue {
        float:right;
        margin-top:-2px;
        font-size:10px;
        color:#FFF;
    }

Answer 1

这里有你的参数：

$(this, ".barContainer .barValue")

应该是

$(".barContainer .barValue", this)

第一个参数是选择器，第二个参数是上下文。

http://jsfiddle.net/pYmbP/3/

Answer 2

$(function() {
$(".barChart").each(function() {
    $(this).html("<div class='barLabel'>" 
        + $(this).data('title') + 
    "</div><div class='barContainer'><div class='bar' style='width:" 
        + $(this).data('value') + 
    "%'><div class='barValue'>" 
        + $(this).data('value') + "%" 
        + "</div></div></div>");
    if($(this).data('value') <= 10) {
        $(this).find('.barValue').css({
            "margin-right": "-20px",
            color: "#000",
        });
    }
});
});

这应该做你喜欢的事。

Answer 3

$（this）.data（'value'）不是整数，不能比较为。尝试：

parseInt($(this).data('value'))

Answer 4

.barContainer .barValue是this（当前.barchart元素）的后代。使用jQuery选择器语法，context是 second 参数，而不是第一个：

$(".barContainer .barValue", this)

或者您可以使用.find，因为它将在内部完成

$(this).find(".barContainer .barValue")

http://jsfiddle.net/ExplosionPIlls/pYmbP/4/

.each（）没有针对正确的元素

4 个答案: