Переключение между переменными (меняется после однократного нажатия) - PullRequest
Новая
       6

Переключение между переменными (меняется после однократного нажатия)

0 голосов
/ 10 мая 2011

Я пытаюсь переключаться между содержимым, хранящимся в переменных. В стартовой позиции показывается весь контент. При нажатии (скажем, на option1) содержимое option2 должно скрываться, а содержимое option1 должно отображаться. Когда затем нажимается опция 2, опция 1 должна отображаться, а содержимое опции 2 должно появляться снова. После этого оба должны действовать как «нормальный» переключатель для своего собственного контента.

Таким образом, var option1 и 2 - это содержимое для тегов a 1 и 2. 

<ul class="thera-nav">
<li><a href="#">option1</a></li>
<li><a href="#">option2</a></li>
<ul> 

var option1 = $('div[class^="cn-list-row"]').filter("[class*='sporttherapie']");
var option2 = $('div[class^="cn-list-row"]').filter("[class*='massagetherapie']");

$('.thera-nav a').click(function() {
e.preventDefault(); 
//show this? and hide others only first time?
});

Ниже я нашел ответ, который находится в правильном направлении, но я не могу понять это правильно для этого случая. Скрыть все кроме $ (this) через: не в селекторе jQuery ?

Кто-то понял, как это сделать правильно?

Код в ответе ниже, я не могу приступить к работе, но с небольшим изменением, я почти заставил его работать. При нажатии на опцию 1, вариант 1 отображается, а второй вариант скрыть. Что мне не хватает, так это два раза щелкнуть вариант 1. 1-й: скрыть два показать один. второй раз: пусть снова появится вариант 1. теперь его только 1 или 2: 

$('.thera-nav a').click(function(e) {
e.preventDefault();
var str = $(this).text();
if (str == 'sporttherapie')
{
var option= $('div[class^="cn-list-row"]').filter("[class*='sporttherapie']");
}

else if (str == 'massagetherapie')
{
var option= $('div[class^="cn-list-row"]').filter("[class*='massagetherapie']");
}
option.siblings().hide();
option.show();

Ответы [ 2 ]

0 голосов
/ 11 мая 2011

Я уверен, что это может быть написано короче и эффективнее, но оно делает то, что я имел в виду.Первый щелчок скрывает все, кроме щелчка.И тогда все переключается как обычно. 

<div id="therapie">
 <ul class="thera-nav">
<li><a href="#" class='on'>sporttherapie</a></li>
<li><a href="#" class='on'>massagetherapie</a></li>
ul>
</div>

. 

$('.thera-nav a').click(function(e) {
e.preventDefault();

var sporttherapie = $('div[class^="cn-list-row"]').filter("[class*='blub']");
var massagetherapie = $('div[class^="cn-list-row"]').filter("[class*='bla']");

var str = $(this).text();
if (str == 'sporttherapie' && $(this).hasClass('on'))
{
var option= sporttherapie
option.siblings().hide();
$('.thera-nav a').removeClass().addClass('of');
}

else if (str == 'massagetherapie' && $(this).hasClass('on'))
{
var option= massagetherapie
option.siblings().hide();
$('.thera-nav a').removeClass().addClass('of');
}

else if (str == 'sporttherapie' && $(this).hasClass('of'))
{
var option= sporttherapie
option.toggle();
}

else if (str == 'massagetherapie' && $(this).hasClass('of'))
{
var option= massagetherapie
option.toggle();
}

return false;

});
0 голосов
/ 10 мая 2011 
$('.thera-nav a').click(function(e) {
    e.preventDefault();
    switch $(this).text() {
        case 'option 1':
            var option = $('div[class^="cn-list-row"]').filter("[class*='sporttherapie']");
            break;
        case 'option 2':
            var option = $('div[class^="cn-list-row"]').filter("[class*='massagetherapie']");
            break;
        default:
            break;
    }
    option.siblings().hide();
    option.show();
    $(this).unbind('click').bind('click', function() {
        switch $(this).text() {
            case 'option 1':
                var option = $('div[class^="cn-list-row"]').filter("[class*='sporttherapie']");
                break;
            case 'option 2':
                var option = $('div[class^="cn-list-row"]').filter("[class*='massagetherapie']");
                break;
            default:
                break;
        option.toggle();
    });
});

Я думаю, это то, что вы хотите.

...