0

我正在努力如何正确应用 .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/

4

2 回答 2

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/

我在您的代码中更改的内容：

  1. 删除了额外的 DOMready事件。
  2. 加入所有事件处理程序并使用jQuery的选择器开始。
  3. 在事件中设置div变量
  4. 在 keyup 触发的输入中及其周围获得了一组输入。（概括分数输入）以便以后可以用于获取值。
  5. 在复杂if..else循环中，我使用indexOf. -1如果条件不满足，它将返回。
于 2013-07-25T18:43:37.940 回答
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/

于 2013-07-25T18:48:14.763 回答