通过计算.attr（）值来设置div高度

Question

新年快乐。

我试图通过计算一系列元素的.attr（）值来设置div的高度。

在HTML

<div id="buttons"> 
    <div id="add-x">Add X</div> 
    <div id="most-x">Most X</div> 
    <div id="least-x">Least X</div> 
    <div id="add-class">Add Classes</div> 
</div> 

<div id="calculate"> 
    <div class="add-x a" x="10">Sample Text</div> 
    <div class="add-x b" x="20">Sample Text</div> 
    <div class="add-x c" x="30">Sample Text</div> 
    <div class="add-x d" x="40">Sample Text</div> 
    <div class="add-x e" x="50">Sample Text</div> 
</div> 

<div id="height-box">Height Box</div> 

JS的

var total = null; 

$('#add-x').on('click', function(event) { 
    $('#calculate .add-x').each(function() { 
     total += parseFloat($(this).attr('x')); 
    }); 
alert(total) 
}); 

var most = null; 

$('#most-x').on('click', function(event) { 
    $('#calculate .add-x').each(function() { 
    var value = parseFloat($(this).attr('x')); 
    most = (value > most) ? value : most;  
    });  
alert(most) 
}); 

var least = null; 

$('#least-x').on('click', function(event) { 
    $('#calculate .add-x').each(function() { 
    var value = parseFloat($(this).attr('x')); 
    least = (value < least) ? value : least; 
    }); 
alert(least) 
}); 

此外，我想求信类设定的值（类= 10px的，类B = 20像素，类别c = 30像素，类d = 40px和类e = 50px），并按照与.attr（）相同的方式将它们计算为总，最大和最小值。这里的目的是不要在html中使用属性。

我的问题是：

1）。如何以与获得最大价值相同的方式获得.attr（'x'）的最小值？

2.）如何将它存储在var中，以便我可以使用.on（）将其应用于元素的高度？ 3.如何为类指定一个值，然后使用.on（）计算它，并确定一个元素的高度？

下面是我在哪里：http://jsfiddle.net/ifthatdoesntdoit/chQdK/58/

感谢

Answer 1

范围界定总。改变这种

var total = 0; 

$('#add-x').on('click', function(event) { 
    total = 0; 
    $('#calculate .add-x').each(function() { 
     total += parseFloat($(this).attr('x')); 
    }); 
    alert(total); 
}); 

和这台最高度：

var most = 0; 

$('#most-x').on('click', function(event) { 
    most = 0; 
    $('#calculate .add-x').each(function() { 
     var value = parseFloat($(this).attr('x')); 
     most = (value > most) ? value : most; 

    }); 
    alert(most); 

    $('#height-box').height(most); 

}); 

和至少：

$('#least-x').on('click', function(event) { 
    least = 1000000; 
    $('#calculate .add-x').each(function() { 
     var value = parseFloat($(this).attr('x')); 
     least = (value < least) ? value : least; 

    }); 

    alert(least) 
    $('#height-box').height(least); 

}); 

你想真的应该在一个单独的问题被问的其他事情。要回答的东西太多，所以很难集中答案。 。 。 。

Answer 2

下面是回答所有问题的代码。请阅读代码中的注释。希望有所帮助。

<div id="calculate"> 
<div class="10px">Sample Text</div> 
<div class="20px">Sample Text</div> 
<div class="30px">Sample Text</div> 
<div class="40px">Sample Text</div> 
<div class="50px">Sample Text</div> 
</div> 


var total = null, 
    $calculateDiv = $('#calculate div'), 
    $heightBox = $('#height-box'), 
    once = true; 

$('#add-x').on('click', function(event) { 
    if(once) { //Calculate total only once. 
     $calculateDiv.each(function() { 
      total += parseFloat($(this).attr('class')); 
      once = false; 
     }); 
    } 
    $heightBox.height(total); // Set the height of green box after calculating total 
}); 



var most = null; 

$('#most-x').on('click', function(event) { 
    $calculateDiv.each(function() { 
     var value = parseFloat($(this).attr('class')); 
     most = (value > most) ? value : most; 

    }); 

$heightBox.height(most); // Set the height of green box after calculating 'most' 

}); 


var least = null; 


$('#least-x').on('click', function(event) { 
    least = parseFloat($calculateDiv.eq(0).attr('class')); // Set it to the first value before comparing. 
    $calculateDiv.each(function() { 
     var value = parseFloat($(this).attr('class')); 
     least = (value < least) ? value : least; 

    }); 

    $heightBox.height(least); // Set the height of green box after calculating 'least' 

});