Question

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

的问题

正在使用一系列输入来记录一组网球的得分。如果用户输入7-6或6-7组合，则会显示隐藏的div，以便他们可以记录抢七。

我只希望显示最接近当前输入的隐藏的tiebreak 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

它没有奏效的原因是因为你没有提到正确的p.tiebreakfield。您可以从.score转到input，next()会转到p：

$(this).parent(".score").next("p");

或者您可以转到超级父级（父级的父级）并迭代回p：

$(this).closest("div").find(".tiebreakfield");

你可以在很大程度上将代码缩小到更小的方式：

//find all text boxes which have a class that start with "score"; this will apply to score-n inputs
$('input[class^="score"]').keyup(function () {
    //find the nearest p.tiebreakfield
    var div = $(this).closest("div").find(".tiebreakfield");
    //get an array of inputs
    var inputs = $(this).parent().find("input[type=text]");
    //first value of text box group
    var value1 = parseInt(inputs[0].value);
    //second value of text box group
    var value2 = parseInt(inputs[1].value);
    //your condition checking
    var isShow = ["6,7", "7,6"].indexOf(value1 + "," + value2) !== -1;
    if (isShow) {
        //your actions
        div.fadeIn();
    } else {
        //your actions again
        div.fadeOut();
    }
});

演示：http://jsfiddle.net/hungerpain/jQHDR/4/

我在代码中更改的内容：

删除了额外的DOM ready事件。
加入了所有事件处理程序，并使用了使用jQuery的选择器。
在事件

div

在键盘触发输入中及其周围获得了一系列输入。（要概括分数输入），以便以后可以使用它来获取值。

在复杂的if..else循环中，我使用indexOf进行了条件检查。如果不满足条件，它将返回-1。

Answer 2

你不需要2 ready()。
类.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/

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

2 个答案: