Помогите разобраться с $(this)

вопрос

Здравствуйте! Помогите пожалуйста разобраться со скриптом.
Вот сам скрипт:


$(document).ready(function() {   
       
 var table1 = $('.blok-koment');
 var table2 = $('.blok-koment-hidden');
 
 table1.click(function(){  
    $(this).css('display','none');
    $(table2).css('display','block');
 });
 
 table2.click(function(){   
     $(this).css('display','none');
     $(table1).css('display','block');  
 });
 });

А вот html:

Показать / Скрыть текст


<div class="blok-koment">
             <div id="blok-koment-icon"></div>
                <div class="blok-koment-text">
                    <font color="#4B8194"><b>DiDfree</b> написал мнение к треку:</font><br />
                    <font color="#992849">Dragonette - Pick Up The Phone (RoughMath Remix)</font>
                </div>
        </div>
        
        <div class="blok-koment-hidden" style="display: none;">     
            <div class="blok-koment-text-hidden">
                Спасибо, хороший трек!
            </div>
            <span style="float: right; margin-top: 6px; margin-right: 4px; color:#4B8194; font-weight: bold;">перейти</span>
        </div>

Мне нужно чтобы при нажатии на .blok-koment он сам скрывался а вместо него появлялся .blok-koment-hidde
А после этого, при нажатии на .blok-koment-hidde он также скрывался а вместо его назад становился .blok-koment

Дело в том, что если у меня на странице 2 элемента с классом .blok-koment-hidde, то скрипт открывает их оба. А нужно чтобы открывало текущий.

Заранее спасибо за помощь!

Ответил: ПафНутиЙ

Вот так немного правильнее будет.
Да и вообще стили надо выносить в css

Показать / Скрыть текст

<!DOCTYPE html>
<html>
<head>
    <title>Показываем.прячем</title>
    <meta charset="windows-1251" />
    <style>
        .blok-koment {
            background: #ccc;
            }
            .blok-koment.hidden {
                display: none;
                }
    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
        jQuery(function($) {
            $(".show-hide .blok-koment").click(function(){
                $(this).parent().find(".blok-koment").toggleClass("hidden");                
            });
        });
    </script>

</head>

<body>
<div class="show-hide">
    <div class="blok-koment">
        <div id="blok-koment-icon"></div>
        <div class="blok-koment-text">
        <font color="#4B8194"><b>DiDfree</b> написал мнение к треку:</font><br />
        <font color="#992849">Dragonette - Pick Up The Phone (RoughMath Remix)</font>
    </div>
    </div>
            
    <div class="blok-koment hidden">     
        <div class="blok-koment-text-hidden">
            Спасибо, хороший трек!
        </div>
        <span style="float: right; margin-top: 6px; margin-right: 4px; color:#4B8194; font-weight: bold;">перейти</span>
    </div>
</div>

<div class="show-hide">
    <div class="blok-koment">
        <div id="blok-koment-icon"></div>
        <div class="blok-koment-text">
        <font color="#4B8194"><b>DiDfree</b> написал мнение к треку:</font><br />
        <font color="#992849">Dragonette - Pick Up The Phone (RoughMath Remix)</font>
    </div>
    </div>
            
    <div class="blok-koment hidden">     
        <div class="blok-koment-text-hidden">
            Спасибо, хороший трек!
        </div>
        <span style="float: right; margin-top: 6px; margin-right: 4px; color:#4B8194; font-weight: bold;">перейти</span>
    </div>
</div>

</body>
</html>

Помогите разобраться с $(this)

Ответил: ПафНутиЙ

Похожие вопросы

Вывод title под соответствующей картинкой

Не отображается модальное окно в IE 10

Картинка в javascript

Как прописать в ajax/freedback.php значение выбранное в календаре?

Другая форма поиска

не работают подгруженные шрифты

Как ограничить параметр стиля?

Сначала видео потом HTML. Как?

Как сделать кнопки слайдеру?

Как перевести табличную вёрстку в html5 ?