Установка высоты div путем вычисления значений .attr ()

Question

с новым годом.

Я пытаюсь установить высоту div, вычисляя значения .attr () для серии элементов.

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.) Как мне сохранить это в переменной, чтобы я мог применить его к высоте элемента, используя .on ()?

3.) Как назначить значение классу, а затем вычислить его с помощью .on () и определить, как оно определяет высоту элемента?

Вот где я нахожусь: http://jsfiddle.net/ifthatdoesntdoit/chQdK/58/

Спасибо

Answer 1

Ниже приведен код, отвечающий на все ваши вопросы. Пожалуйста, прочитайте комментарии в коде. Надеюсь, это поможет.

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

});

Answer 2

Обзор по итогу.Измените это на

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);

});

Другие вещи, которые вы хотите, должны действительно быть заданыотдельный вопрос.Слишком много вещей, чтобы ответить, поэтому сложно сфокусировать ответы.,,.