jQuery — затухание различных элементов и их исчезновение при нажатии кнопки

Я пытаюсь создать несколько кнопок, которые заставляют поле появляться в зависимости от того, какая кнопка нажата. Я делаю это, предоставляя каждому блоку собственный класс и передавая аргумент функции, чтобы определить, какой блок предназначен для цели. Затем я назначаю эту функцию атрибуту onclick каждой кнопки на странице (я знаю, что мне, вероятно, следует прикрепить обработчик события в отдельном файле). Вот функция:

var show = function(boxNumber){
    if($(this).hasClass('shown')){
       $(this).removeClass('shown');
       $(this).html('Show');
       $('.box'+boxNumber).fadeOut(1000);
      }
    else{
       $(this).html('Hide');
       $(this).addClass('shown');
       $('.box'+boxNumber).fadeIn(1000);
      }
 };

HTML:

<span onclick="show(1)">Box 1</span>
<div class="box1"></div>

etc. for more boxes

Однако эта функция не работает. Во-первых, это ключевое слово, похоже, не нацелено на кнопку, потому что html кнопки не меняется при нажатии. Однако, когда я заменяю ключевое слово this классом кнопки, все работает нормально.

Во-вторых, функция хорошо закрашивает поля, но затем не скрывает их, если я снова нажимаю кнопку.

Я застрял, поэтому любая помощь будет оценена по достоинству! Спасибо.


javascript jquery onclick fadeout
person Matthew Shaw    schedule 14.03.2013    source источник
comment
Почему вы используете атрибут onClick. Если вы используете jQuery, вы можете использовать обработчик событий on. Добавьте идентификатор в свой диапазон, затем $('my-id').on('click', function() { ... $(this).fadeOut(1000);})   -  person Bertrand    schedule 15.03.2013
comment
Я сделал цикл for, чтобы добавить событие click для каждой кнопки, но это привело к большему количеству проблем. Мне пришлось добавить уникальный класс к каждой кнопке, а затем прокрутить их. Цикл выглядел так: for(i=0;i‹5;i++){$('.button'+i).click(function(){/*добавьте код появления и исчезновения сверху, но используйте 'i' для идентификации поля вместо аргумента*/})}. Не знаю почему, но цикл не работал :(   -  person Matthew Shaw    schedule 15.03.2013
comment
В вашем диапазоне нет класса button#. Вероятно, поэтому ваш цикл не работал.   -  person Dave Zych    schedule 15.03.2013
comment
Я добавил класс, когда использовал цикл, но удалил его, как только попытался использовать onclick.   -  person Matthew Shaw    schedule 15.03.2013
comment
@ user2022646: this в контексте onclick — это не то, что вы думаете. Вам нужно будет передать его функции, чтобы получить нажатый <span/> как this. Например: <span onclick="show(1,this)"/>. Я добавил это к своему ответу.   -  person Aaron Blenkush    schedule 15.03.2013

Ответы (2)


arrow_upward
3
arrow_downward

Решение 1 (все jQuery):

Самый чистый способ сделать это — придерживаться jQuery для обработки кликов. Вы уже используете jQuery для затухания, почему бы не использовать его для привязки кликов? Попробуй это:

jsFiddle

<span>Box 1</span>
<div class="box1"></div><br/>
<span>Box 2</span>
<div class="box2"></div><br/>
<span>Box 3</span>



$('span').click(function () {
    var boxNumber = $(this).index('span') + 1;
    if ($(this).hasClass('shown')) {
        $(this).removeClass('shown');
        $(this).html('Show');
        $('.box' + boxNumber).fadeIn(1000);
    } else {
        $(this).html('Hide');
        $(this).addClass('shown');
        $('.box' + boxNumber).fadeOut(1000);
    }
});

Примечание. Если вы хотите, чтобы затемненные блоки сохраняли свое место в документе, попробуйте использовать fadeTo() вместо этого.

Решение 2 (смешанный):

Однако, если вам нужно использовать атрибут onclick для привязки обработчика кликов, как показано в вашем примере, вы можете сделать это следующим образом:

jsFiddle

<span onclick="show(1,this)">Box 1</span>
<div class="box1"></div><br/>
<span onclick="show(2,this)">Box 2</span>
<div class="box2"></div><br/>
<span onclick="show(3,this)">Box 3</span>



function show(boxNumber, elem) {
    $this = $(elem);

    if ($this.hasClass('shown')) {
        $this.removeClass('shown');
        $this.html('Show');
        $('.box' + boxNumber).fadeIn(1000);
    } else {
        $this.html('Hide');
        $this.addClass('shown');
        $('.box' + boxNumber).fadeOut(1000);
    }
};
person Aaron Blenkush    schedule 14.03.2013
comment
Вы можете еще больше упростить последнюю функцию до двух строк, если вы не используете класс 'show' для чего-либо, кроме включения: function show(boxNumber, elem) { $(elem).html($('. box'+boxNumber).is(:visible) Показать : Скрыть); $('.box'+boxNumber).fadeToggle(1000); } - person Stephen Fischer; 15.03.2013
comment
Большое спасибо, Аарон. Ваше чистое решение jQuery прекрасно работает. Однако я глуп и забыл упомянуть, что поля начинаются скрытыми с помощью $('div').hide(); Кажется, это вызывает проблемы, потому что мне нужно сначала дважды нажать на кнопки, чтобы они работали. Но когда коробки видны с самого начала, все работает отлично. - person Matthew Shaw; 15.03.2013
comment
Тогда у вас были правильные fadeIn() и fadeOut(). Просто переключите их обратно. Я предположил, что они были неверны, потому что я не знал, что они были скрыты с самого начала! :-) - person Aaron Blenkush; 15.03.2013

arrow_upward
1
arrow_downward

http://jsfiddle.net/fVENv/5/

Лучший способ, который я вижу, - это добавить скрытый текст с помощью jquery при загрузке страницы, а затем переключить класс при щелчке (а также переключение затухания).

HTML:

<p>Box 1</p>
<div></div><br/>
<p>Box 2</p>
<div></div><br/>
<p>Box 3</p>
<div></div><br/>

jquery:

$('p').append('<span class="show">Show</span><span class="hide">Hide</span>');
$('div').hide();
$('p').click(function () {
    $('p').click(false);
    $(this).toggleClass('hidden').next('div').fadeToggle(function(){
    $('p').click(true);
    });
});

CSS:

div {
    width:50px;
    height : 50px;
    background: red;
}
p {cursor:pointer;}
span { padding: 5px; margin-left:5px;}
p.hidden > .hide, p > .show  { display:inline }
p > .hide, p.hidden > .show { display: none; }
person superUntitled    schedule 15.03.2013