Question

好的，所以我在使用jquery方面相当新手（我多年来一直使用插件）而且我无法弄清楚发生了什么。

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

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

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

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

2 个答案: