1
$(document).ready(function(){
    $(".job_link").click(function(){        
        $(this).parents(".job_item").find(".job_desc").toggleClass("job_hidden");
        $(".arrow span").text(↓);
    });
});

Хочу чтобы при клике содержимое span менялось, по умолчанию там стоит ↑ А нужно чтобы при клике оно менялось на ↓ при повторном клике обратно на ↑

Как такое сделать? Сейчас это код не рабочий, потому что .arrow span не понимает для какого класса почему-то.

Добавил разметку:

        <div class="job_item">
            <div class="job_title">
                <a class="job_link" href="javascript:void(0);"> <b><?=$name?> </b></a>
<span class="arrow" style="cursor: pointer; color:#911B1D;">&uarr;</span>
            </div>
            <div class='job_desc job_hidden'>
                <p>
                <?=$text?>
                </p>
            </div>
        </div>
1
  • .arrow span - не совсем правильно для конкретного случая, тут нужно писать span.arrow :-) Commented 9 нояб. 2011 в 21:53

2 ответа 2

1

Путем небольшого усложнения разметки можно сделать так:

<style type="text/css">
    .job_item span.up,
    .job_item span.down  {
        cursor: pointer;
        color:#911B1D;
        display: none;
    }
    .job_item .job_desc {
        display: none;
    }
    .job_item .up span.up,
    .job_item .down span.down  {
        display: inline;
    }
    .job_item .down .job_desc {
        display: block;
    }
</style>
...
<div class="job_item">
    <div class="up">
        <div class="job_title">
            <a class="job_link" href="javascript:void(0);"> <b><?=$name?> </b></a>
            <span class="up">&uarr;</span>
            <span class="down">&darr;</span>
        </div>
        <div class='job_desc'>
            <p><?=$text?></p>
        </div>
    </div>
</div>
...
<script type="text/javascript">
    $(document).ready(
            function () {
                $(".job_link").click(
                    function () {
                        var o = $(this).parent().parent();

                        o.attr(
                            "class",
                            (o.attr("class") == "up") ?
                                "down" :
                                "up"
                        );
                    }
                );
            }
        );      
</script>

P.S. Можно посмотреть как это выглядит здесь: http://jsfiddle.net/chernomyrdin/cEsad/

3
  • Спасибо, то что надо.
    – Tchort
    Commented 10 нояб. 2011 в 6:21
  • 1
    В принципе можно сделать по-проще с точки зрения разметки, в примере я пытался максимально сохранить то, что у Вас было. Можно сделать: <div class="job_item"> <div class="up"> <a class="up" href="#!up"><u>...</u> <span>&uarr;</span></a> <a class="down" href="#!down"><u>...</u> <span>&darr;</span></a> <p>....</p> </div> </div> Так более прозрачный под получается, хотя я не заню что там в <p> будет выводиться, там могут быть ньюансы Commented 10 нояб. 2011 в 6:45
  • Первый пример отлично подошел, в <p> будет самое разное.
    – Tchort
    Commented 10 нояб. 2011 в 7:18
1

Используйте $.toggle, и в него поместите реакцию на клик.

4
  • Сейчас это код нерабочий, потому что .arrow span не понимает для какого класса почему-то.
    – Tchort
    Commented 9 нояб. 2011 в 11:32
  • Ну да, надо что-то вроде такого, только с .arrow span разобраться надо (не видя разметки, непонятно, как). <pre> $(document).ready( function(){ $(".job_link").toogle( function(){ $(this).parents(".job_item").find(".job_desc").toggleClass("job_hidden"); $(".arrow span").text(&darr;); }, function(){ $(this).parents(".job_item").find(".job_desc").toggleClass("job_hidden"); $(".arrow span").text(&uarr;); } ); } ); </pre>
    – barber
    Commented 9 нояб. 2011 в 11:47
  • Добавил разметку.
    – Tchort
    Commented 9 нояб. 2011 в 12:15
  • Надо местами поменять: span .arrow. Ну да, выше уже написали :)
    – barber
    Commented 10 нояб. 2011 в 5:00

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.