javascript - 使用 javascript 定位某个类的最接近的 div

Question

我正在努力解决如何正确应用 .closest

一系列输入被用来记录一组网球比赛的得分。 如果用户输入 7-6 或 6-7 组合，则会出现一个隐藏的 div，以便他们可以记录决胜局。

我只想显示最接近当前输入的隐藏决胜局 div。

这是我到目前为止所拥有的:

$(document).ready(function() {
                var div = $('.tiebreakfield');
                $('.score1, .score2').keyup(function() {
                    var value1 = parseInt($(".score1").val());
                    var value2 = parseInt($(".score2").val()); 
                   if ((value1 == 6 || value1 == 7) && (value2 == 6 || value2 == 7) && (value1 !== value2)) {
                        div.fadeIn();
                    } else {
                        div.fadeOut();   
                    }
                });
            });

$(document).ready(function() {
                var div = $('.tiebreakfield');
                $('.score3, .score4').keyup(function() {
                    var value1 = parseInt($(".score3").val());
                    var value2 = parseInt($(".score4").val()); 
                   if ((value1 == 6 || value1 == 7) && (value2 == 6 || value2 == 7) && (value1 !== value2)) {
                        div.fadeIn();
                    } else {
                        div.fadeOut();   
                    }
                });
            });

如果输入 7-6 组合，上面的代码将显示所有隐藏的 div。

这是一个示例... http://jsfiddle.net/jQHDR/

Answer 1

1. 您不需要 2 个 ready()。
2. 具有 .tiebreakfield 类的元素不是 div。

如果我很好地理解了您的问题，那么我认为这是您需要的代码示例:

                $('.score1, .score2').keyup(function() {
                var element = $(this).parent().siblings(".tiebreakfield");
                var value1 = parseInt($(".score1").val());
                var value2 = parseInt($(".score2").val()); 
               if ((value1 == 6 || value1 == 7) && (value2 == 6 || value2 == 7) && (value1 !== value2)) {
                    element .fadeIn();
                } else {
                    element .fadeOut();   
                }
            });

演示: http://jsfiddle.net/vTQr6/