Question

<tr>
  <td>
  <input type="button" value="+" id="add1" class="add"  />        
  <input type="text" id="score1" value="0" class="score" size="1" />        
  <input type="button" value="-" id="minus1" class="minus" />
  </td>

  <td>
  <input type="button" value="+" id="add1" class="add" />        
  <input type="text" id="score2" value="0" class="score" size="1" />        
  <input type="button" value="-" id="minus1" class="minus"  />
  </td>

  <td><input type="button" value="enter" id="update" class="update" ></td>
 </tr>



   <script type="text/javascript">
    $(function()
    {
        $(".add").click(function()
        {
            var currentVal = parseInt($(this).next(".score").val());
            if (currentVal != NaN)
            {
                $(this).next(".score").val(currentVal + 1);
            } 
        });

        $(".minus").click(function()
        {
            var currentVal = parseInt($(this).prev(".score").val());
            if (currentVal != NaN)
            {
                $(this).prev(".score").val(currentVal - 1);
            }
        });
    });

    </script>

以上代码可以正常工作，因为我想要。现在，我想根据用户的输入提醒计算结果，这里我失败了。下面的代码不起作用。我也有超过1行（即tr），所以考虑到我有很多输入文本和按钮。当我按下其中一个输入按钮时，我得到了NaN。请帮我纠正下面的代码。谢谢和问候

<script type="text/javascript">

$(document).ready(function(){ 
  $('.update').click(function(){ 

    var firstresult = parseInt($(this).prev("#score1").val());
    var secondresult = parseInt($(this).prev("#score2").val());

    if(firstresult < secondtresult) {
      result = '2';
    } else if(firstresult > secondtresult) {
      result ='1';
    } else if (firstresult = secondtresult) { 
      result = 'x';       
    } 

    alert(result);     
  });  
}); 

</script>

Answer 1

元素的id在页面中应该是唯一的，并且考虑到这一点，您可以直接使用id选择器。另外，$(this).prev("#score1")不会选择任何内容，因为它不是更新按钮的兄弟，同样适用于score2。试试这个。

$(document).ready(function(){ 
  $('.update').click(function(){ 

    var firstresult = parseInt($("#score1").val());
    var secondresult = parseInt($("#score2").val());

    if(firstresult < secondresult) {
      result = '2';
    } else if(firstresult > secondtresult) {
      result ='1';
    } else if (firstresult = secondresult) { 
      result = 'x';       
    } 

    alert(result);     
  });  
});

Answer 2

对于初学者，在引用ID时使用prev / next是次优的。本质上，ID必须是唯一的，因此不应该有任何具有相同名称的“next”或“previous”元素。因此，只需使用单选：$('#elementId')

即可获取

其次，我会通过最常见的元素打破每个关系，尽管它自己的兄弟姐妹（同一个父标记中的元素）或<tr>元素，并以这种方式找到你的元素。通过元素遍历树，尽可能高（不丢失范围）。例如：

从.add或.minus，您可以在siblings()的同一行中获得分数框，例如：

$(this).siblings('.score').val();

要比较值的行，请使用<tr>标记：

// .score element in next row
$(this)            // from the button clicked
  .closest('tr')   // move up to the <tr>
  .next()          // on to the next row
  .find('.score'); // then in this row, find the .score element

// .score element in previous row
$(this)
  .closest('tr')
  .prev()          // same as above, just go up a row
  .find('.score');

如果您仍然需要帮助，请发布您所拥有的jsfiddle.net，我相信我们可以帮助您。

Jquery中的prevUntil（）/ prev（）函数

2 个答案: