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

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

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

});

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

2 个答案: