JQuery - 父母

发布于 2024-12-14 03:49:41 字数 1939 浏览 3 评论 0原文

我想根据条件在父级中显示“OPEN”或“CLOSED”，但我不知道该怎么做。此代码使两个

标题充当下拉列表。我希望函数传递参数，如果不等于1，我想在

的中显示OPEN。

Javascript

<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>

HTML

 <body>
    <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"><script type="text/javascript">divide(3, 7)</script></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"><script type="text/javascript">divide(3,7)</script></span>
                </p>
            </div>
        </div>
    </div>
</body>

原文

I want to display either "OPEN" or "CLOSED", depending on the conditional, in the parent, but I don't know how to do this. This code makes two <h2> headings work as a drop down list. I want the function to pass the parameters, and if it does not equal 1, I want to display OPEN in the <span> of the <h2>.

Javascript

<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>

HTML

 <body>
    <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"><script type="text/javascript">divide(3, 7)</script></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"><script type="text/javascript">divide(3,7)</script></span>
                </p>
            </div>
        </div>
    </div>
</body>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

傲性难收 2024-12-21 03:49:41

当您以当前方式执行 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);
    });
});

When you execute a JavaScript function in HTML the way you're doing, that function has no awareness of what HTML element contains it. One way to bypass that problem (my favorite way) is to put those variables in data- attributes for the DOM element, and use jQuery to extract and operate on them using .data().

Your second problem is that the h2 tag isn't a parent (container) of the span.team element. A little more DOM traversal is necessary to get to the one from the other.

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

new 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>

new 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);
    });
});

回复收藏 0 原文