'this' não funciona corretamente em outro evento. Não sei por que [duplicado]

Question

Jan 06, 2017, 01:14 AM

'this' não funciona corretamente em outro evento. Não sei por que [duplicado]

Esta pergunta já tem uma resposta aqui:

evento "addEventListener" do Javascript é acionado no carregamento da página [duplicado] 2 respostas

História curta, não sei por que não está funcionando, tentei o Console.Log () para descobrir o que é 'isso' e o evento continua passando pela janela. É um evento de clique que deve ativar efeitos em uma determinada figura neste carrossel, e é por isso que não posso pesquisar individualmente individualmente por classe (pelo menos que eu saiba). Alguma correção do mais inteligente?

var carFigure = null;
//----------The Events
$('.figure').click(toggleCarousel(this));
//$('.figure').mouseover(stopCarousel(this));
//$('.figure').mouseleave(startCarousel(carFigure));

//------------Switcharoo function
function toggleCarousel(event) {
    var bool = false;
    console.log(event)
    if (bool) {
        stopCarousel(event);
        bool = false;
    }
    else {
        startCarousel(event);
        bool = true;
    }
}


//----------The action functions
function stopCarousel(e) {
if (carFigure != null) { document.getElementById('carousel').style.animationPlayState = "paused";
        var p = e.parentElement;
        var a = p.getElementsByTagName('DIV')[2];
        if (a.getElementsByTagName('IMG')[0].style.transform = "none") {
            a.getElementsByTagName('IMG')[0].style.transform = "scale(1.2, 1.2) translateY(-25%)";
            a.getElementsByTagName('IMG')[0].style.borderRadius = "100%";
            a.getElementsByTagName('H5')[0].style.color = "rgba(255,255,255, 0)";
            this.getElementsByClassName('links')[0].style.transform = "translateY(-250%)";
            this.getElementsByClassName('links')[0].style.opacity = "1";
            carFigure = null;
        }
    }
};
function startCarousel(e) {
    if (e != null) {
        carFigure = e;
        document.getElementById('carousel').style.animationPlayState = "running";
        var p = e.parentElement;
        var a = p.getElementsByTagName('DIV')[2];
        a.getElementsByTagName('IMG')[0].style.transform = "none";
        a.getElementsByTagName('IMG')[0].style.borderRadius = "0";
        a.getElementsByTagName('H5')[0].style.color = "rgba(255,255,255, 1)";
        this.getElementsByClassName('links')[0].style.transform = "none";
        this.getElementsByClassName('links')[0].style.opacity = "0";
    }
};

--HTML Version (Snippet)
<div class="carcontainer">
    <div id="carousel">
        <figure>
            <div class="figure">
                <div class="links">
                    <a><img src="~/Content/images/LinkedInIco.png" /></a>
                    <a href="http://www.example.com"><img src="~/Content/images/WebsiteIco.png" /></a>
                </div>
            </div>
            <div>
                <h5>Person Name</h5>
                <img src="~/Content/images/Name.jpg" alt="" />
            </div>
        </figure>
        <figure>
            <div class="figure">
                <div class="links">
                    <a><img src="~/Content/images/LinkedInIco.png" /></a>
                    <a href="http://www.example.com"><img src="~/Content/images/WebsiteIco.png" /></a>
                </div>
            </div>
            <div>
                <h5>Person Name</h5>
                <img src="~/Content/images/Name.jpg" alt="" />
            </div>
        </figure>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>