Функция Jquery должна повторяться каждый раз при нажатии триггера (но это не так)

Что ж, у меня есть прекрасный маленький сайт, на котором есть div, который overflows:hidden содержит содержимое, не вписывающееся в оболочку. Я хочу margin-top: $value-120px каждый раз, когда я нажимаю диапазон class'd .maisfilme. Это то, что я получил

    $(document).ready(function (){
$(".maisfilme").on("click", function() {
     var $mtop = $(this).css('margin-top');

        var $vai = (parseInt($mtop)+ 110 + "px");
    $("#filme").css ({
        'margin-top' : "-"+$vai
    });
});
});

Это на самом деле делает работу. Он получает margin-top, увеличивает свое значение int на +120px, ставит - перед ним и так, сдвигает div вверх. Настоящая проблема в том, что это происходит только ОДИН РАЗ. Если я нажму .maisfilme еще раз, ничего не произойдет.
Может ли кто-нибудь знать, что мне делать, чтобы функция срабатывала каждый раз, когда нажимается .maisfilme?


function html jquery css
person user1576978    schedule 05.08.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Во второй раз, когда вы это сделаете, это будет -(-110 + 110), что не увеличивает величину, как вы хотите. Вам нужно изменить логику вашего знака, если вы хотите, чтобы он с каждым разом становился все более негативным.

Кроме того, вы извлекаете css из $(this), но устанавливаете его на $("#filme"), чтобы он не поднимался каждый раз, если только это не один и тот же объект. Они должны быть одинаковыми, чтобы они накапливались каждый раз, когда вы нажимаете.

Чтобы с каждым разом он становился все более негативным, вы можете сделать это:

$(document).ready(function (){
    $(".maisfilme").on("click", function() {
        var $mtop = $(this).css('margin-top');

        var $vai = (parseInt($mtop) - 110) + "px";
        $(this).css ({
            'margin-top' : $vai
        });
    });
});

или немного другая версия, которая дает немного другой результат, если начальное значение margin-top не равно нулю (больше похоже на то, что делает ваша первая итерация):

$(document).ready(function (){
    $(".maisfilme").on("click", function() {
        var $mtop = $(this).css('margin-top');

        var $vai = (-(Math.abs(parseInt($mtop)) + 110)) + "px";
        $(this).css ({
            'margin-top' : $vai
        });
    });
});
person jfriend00    schedule 05.08.2012
comment
Что ж, спасибо за это, но, к сожалению, это работает только при первом нажатии; (если я снова нажму .maisfilme, ничего не произойдет - person user1576978; 05.08.2012
comment
@ user1576978 - Вы должны предоставить нам рабочую копию HTML/CSS, чтобы мы могли помочь в дальнейшем. Вы дали нам только часть картины. - person jfriend00; 05.08.2012
comment
Вы можете увидеть его вживую здесь -› matheusduarte.com/site он находится на box2 Producao Musical, один с фильмом - person user1576978; 05.08.2012
comment
@user1576978 user1576978 - На самом деле, основная проблема заключается в том, что вы получаете CSS от $(this), но устанавливаете его на $("#filme"), поэтому, если это не один и тот же объект, ваш CSS не будет накапливаться каждый раз. Вам нужно изменить один из них, чтобы он соответствовал другому. - person jfriend00; 05.08.2012
comment
.maisfilme как бы невидим... лол. это на ⇓ Prox, рядом с т блондинки - person user1576978; 05.08.2012
comment
СПАСИБО! Все, что мне нужно было сделать, это изменить var $mtop = $(this).css('margin-top'); to var $mtop = $(#filme).css('margin-top'); работал нормально!!! Большое спасибо. - person user1576978; 05.08.2012
comment
я имею в виду... ДЕЙСТВИТЕЛЬНО БОЛЬШОЕ СПАСИБО, это много значило для меня, ваша помощь сэкономила мне часы сна сегодня вечером. 3:30 здесь до свидания - person user1576978; 05.08.2012