Question

我有一张表中有5个标签。

<tr id="rows">
    <td x="111" y="1" col="1" row="1">
      <div class="marge-col"></div>
    </td>
    <td x="1" y="1" col="2" row="1">
        <div class="marge-col"></div>
    </td>
    <td x="1" y="1" col="3" row="1">
        <div class="marge-col"></div>
    </td>
    <td x="1" y="1" col="4" row="1">
      <div class="marge-col"></div>
    </td>
    <td x="1" y="1" col="5" row="1">
        <div class="marge-col"></div>
    </td>
</tr>

我想点击div.marge-col td标记（点击div的父级）以增加attr('x')一个值（例如，当我点击first.merge-col父标记（td）时x属性并将值更改为2）我做不到。这是我的jquery代码，但它不起作用。当我点击第一个div.marge-col控制台时，我显示**11**！为什么？？？（1 + 1 = 11 ???）

$(document).on('click','#rows td .marge-col',function(){
                    console.log('col');
                    $(this).parent().attr('x',$(this).parent().attr('x')+1);
                    console.log($(this).parent().attr('x'));
                });

Answer 1

因为该属性是字符串而不是数字，使用pasrseInt将其用作数字，当您添加字符串和数字时，该数字将被视为字符串并连接到另一个字符串。

$(this).parent().attr('x',parseInt($(this).parent().attr('x'))+1);

Answer 2

问题是+运算符连接字符串以及使用数字执行加法，并且属性值总是很强，即使它是数字字符。因此，在递增之前，请尝试确保“数字”是一个数字：

$(this).parent().attr('x', function (i,x){
    return parseInt(x) + 1;
});

使用jquery单击元素时增加新属性

2 个答案: