4

我在让我的 jQuery 定位正确的 div 时遇到了一些麻烦。我正在创建一个水平条形图小部件，并且我希望值标签在​​小于 10% 时碰到条形的右侧（为了便于阅读）。

看起来我没有正确定位barValue div，因为它没有像应有的那样将 <10% 的值颠倒过来。

在此处输入图像描述

这是一个小提琴。

$(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;
    }
4

4 回答 4

6

你有你的参数在这里倒退：

$(this, ".barContainer .barValue")

应该

$(".barContainer .barValue", this)

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

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

于 2013-02-08T20:09:35.127 回答
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",
        });
    }
});
});

这应该做你喜欢的。

于 2013-02-08T20:11:11.273 回答
0

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

$(".barContainer .barValue", this)

或者您可以使用.find，因为无论如何它都会在内部完成

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

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

于 2013-02-08T20:11:45.670 回答
0

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

parseInt($(this).data('value'))
于 2013-02-08T20:08:25.563 回答