通过计算 .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)  
});

此外，我想为字母类（a=10px、b=20px、c=30px、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

以下是回答您所有问题的代码。请阅读代码中的 cmets。希望对您有所帮助。

<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'

});