JQuery - Родители - PullRequest
Новая
       15

JQuery - Родители

0 голосов
/ 09 ноября 2011

Я хочу отобразить «ОТКРЫТО» или «ЗАКРЫТО», в зависимости от условия, в родительском, но я не знаю, как это сделать.Этот код заставляет два заголовка <h2> работать как выпадающий список.Я хочу, чтобы функция передавала параметры, и если она не равна 1, я хочу отобразить OPEN в <span> из <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>

Ответы [ 2 ]

0 голосов
/ 09 ноября 2011

Другой вариант - передать идентификатор интервала, которым вы хотите манипулировать:

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

0 голосов
/ 09 ноября 2011

Когда вы выполняете функцию JavaScript в HTML так, как вы это делаете, эта функция не знает, какой элемент HTML содержит ее. Один из способов обойти эту проблему (мой любимый способ) - поместить эти переменные в атрибуты data- для элемента DOM и использовать 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);
    });
});
...