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

好的，所以我对使用jquery是相当陌生的（我已经使用插件很多年了），我根本不知道发生了什么

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

现在，我试图计算网格的值，所以x2*y2=网格值。 我计划一次处理一行（因为我的数学头脑不允许我为整个网格计算公式）。我按如下方式提取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（）

---

-我正在工作的那一行是红色的，js在第22行，产生了70

我的第一个怀疑似乎是真的： 在某一点上，

$y2

在技术上是一个字符串（在调试时确认了这一点）

如果你更换

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

与

它应该按照你想要的方式工作。

---

因为如果您有一个字符串

“7”

并将数字

0

附加到该字符串上，那么它将是

“70”

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

地雷：

这是你的密码

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

---

等待所以你想做一个时间表，基本上？那是目标吗？是的，那是目标。

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