Question

我希望在父级中显示“OPEN”或“CLOSED”，具体取决于条件，但我不知道如何执行此操作。此代码使两个<h2>标题作为下拉列表工作。我希望函数传递参数，如果它不等于1，我想在<span>的{{1}}中显示OPEN。

的Javascript

<h2>

HTML

<script type="text/javascript">
    var a = null;
    var b = null;
    var c = 1;
    $(document).ready(function () {
        $(".toggle_container").hide();
        $("h2.trigger").click(function () {
            $(this).toggleClass("active").next().slideToggle("slow");
        });
    });
    function divide(a, b) {
        (a / b != c) ?
      // Where help is needed
      //  $(this).parent(".status").text("OPEN").css("color", "green") :
      //  $("team").parent(".status").text("CLOSED").css("color","red");
        document.write(a + " / " + b);
    }
</script>

Answer 1

当您以HTML的方式执行JavaScript函数时，该函数无法识别HTML元素包含的内容。绕过该问题的一种方法（我最喜欢的方法）是将这些变量放在DOM元素的data-属性中，并使用jQuery使用.data()提取和操作它们。

您的第二个问题是h2标记不是span.team元素的父（容器）。需要多一点DOM遍历才能从另一个中获取。

http://jsfiddle.net/mblase75/fzwBM/

新HTML：

<div class="tournaments">
    <h2 class="trigger">Tournament 1<span class="status"></span></h2>
    <div class="toggle_container">
        <div class="block">
            <h3>Details</h3>
            <p>Deadline: DATE</p>
            <p>Teams: <span class="team" data-a="3" data-b="7"></span>
            </p>
        </div>
    </div>

    <h2 class="trigger">Tournament 2 <span class="status"></span></h2>
    <div class="toggle_container">
        <div class="block">
            <h3>Details</h3>
            <p>Deadline: DATE</p>
            <p>Teams: <span class="team" data-a="3" data-b="7"></span>
            </p>
        </div>
    </div>
</div>

新JS：

$(document).ready(function() {
    $(".toggle_container").hide();
    $("h2.trigger").click(function() {
        $(this).toggleClass("active").next().slideToggle("slow");
    });

    $('span.team').each(function() {
        var a = $(this).data('a');
        var b = $(this).data('b');
        var $status = $(this).closest('.toggle_container').prev('.trigger').find('.status');
console.log($status.length);
        if (a != b) {   // if a/b!=1, then a!=b
            $status.text("OPEN").css("color", "green");
        } else {
            $status.text("CLOSED").css("color", "red");
        }
        $(this).text(a + " / " + b);
    });
});

Answer 2

另一个选择是传入您想要操作的范围的ID：

http://jsfiddle.net/Lp99T/3/

JQuery - 父母

2 个答案: