添加到变量时来自表格单元格的奇怪值

Question

好的，所以我在使用 jquery 方面相当陌生（我多年来一直在使用插件），我根本不知道发生了什么。

我有一个表格（一个基于两个用户输入数字的乘法网格）。顶行标题和最左列是按顺序生成的。到目前为止一切顺利。

现在，我正在尝试计算网格的值，因此 x2 * y2 = 网格值。 我计划一次处理 1 行（因为我的数学大脑不允许我为整个网格制定公式）。我像这样拉 x 行标题的值：

var yHead = $('.y-head.y2').text();
var xHead = $('.x-head.x2').text();
console.log(xHead);
console.log(yHead);

好的，我得到了我想要的（嗯，我得到了正确的数字 22 次，因为它在 jquery 每个循环中。所以我得到了 22 次）。 但是 y 列标题我得到了奇怪的值 70 和我想要的值。 （由于循环，每次重复 22 次）。

1) 为什么每个循环的迭代次数是 22 次而不是 11 次？ 2) 控制台日志中的 70 到底是从哪里来的？

这个头发真的掉光了…… 我试过 .text()、.html()、.val()

jsFiddle - 我正在处理的行是红色的，js 在第 22 行，产生到 70

Answer 1

我的第一个怀疑似乎是真的： 在某一时刻，$y2 在技术上是一个字符串（在调试时确认了这一点）。

如果你替换

$(this).html($x2 + i);
//and
$(this).html($y2 + i);

与

$(this).html(parseInt($x2) + i);
//and
$(this).html(parseInt($y2) + i);

它应该按照您想要的方式工作。 因为如果你有一个字符串 "7" 并将数字 0 附加到它上面，它将是 "70"。

Answer 2

好的...所以你有一些问题...

我的：http://jsfiddle.net/Ja7QM/3/

这是你的代码...

// the main issue you were having had to deal with the assignment of these two 
// variables... I'm still not sure where that 70 was coming from but it was
// due to the different places and ways you assigned values to $x2 and $y2 
$y2 = $("input#Y").val();
$x2 = $("input#X").val();


    // this is your headers()
    function headers() {
    // set the heading of the grid to the values 5 lower and 5 higher than input
        $('.x-head').each(function(i) {
            $(this).html($x2 + i);
        });

    // set the heading of the grid to the values 5 lower and 5 higher than input
        $('.y-head').each(function(i) {
            $(this).html($y2 + i);
        });

    }; 
    // and mine... not much different but I used text() instead. 
    // I'm not sure it matters, really... 
    function my_headers() {   
         $('.x-head').each(function(i) { $(this).text(x2 + i); }); 
         $('.y-head').each(function(i) { $(this).text(y2 + i); }); 
    };

    // your calculate... 
    function calculate() {
    // calculate grid values (column at a time)
    $('.content.x0').each( function(i){

            var yHead = $('.y-head.y2').text();
            var xHead = $('.x-head.x2').text();
            console.log(yHead);
        })

    };


// my calculate function... be warned: I am not good at selectors.  there 
// might be a better, more efficient way... this is just the first thing 
// that worked for me... sorry.
function calculate() {  

    // find all the TR's except the first one, and go through each TD
    $('table tr:gt(0) > td').each(function(){  
        if ($(this).hasClass('content')) {

            // figure out what the Y value is for the first TD of this row 
            var y = $(this).parent('tr').find('td:eq(0)').text(); 

            // found this here: http://stackoverflow.com/questions/788225
            // to get the column number of the current TD
            var col = $(this).parent().children().index($(this)); 

            // k, so now we need that X value.  find the first tr of this table 
            // and find the td in the same column as the current TD
            var x = $(this).closest('table')
                           .find('tr:eq(0)')
                           .find('td').eq(col).text();

            x = parseInt(x,10);  // for safety in numbers 
            y = parseInt(y,10);

            $(this).text((x*y).toString());  // for safety in strings...?
        }
    });   
};


// I moved this over to the CSS because it kept getting in my way.... 
$('.content.x0').css("color", "red");

//set input A to pos x2 on the grid
$("input#X").keyup(function () {
  var value = $(this).val();
// set global var of x2 based on x input
  $x2 = $(this).val() - 5;
  headers();
  calculate();
}).keyup();


// set input B position y2 on the grid
$("input#Y").keyup(function () {
    var value = $(this).val();
// set global var of x2 based on x input
    $y2 = $(this).val() - 5;
    headers();
    calculate();
}).keyup();

// i just made those one thing and set x and y 
// things to update  for any change...  
//set input A to pos x2 on the grid
$("input#X, input#Y").keyup(function () {  
    x2 = $("input#X").val() - 5;
    y2 = $("input#Y").val() - 5;      
    headers();
    calculate();
}).keyup();