jquery - jQ ToggleClass 和执行正确元素的麻烦

Question

我正在处理个人资料，但在使用脚本时遇到了一些问题。

目前我想要两个（或更多）元素上的 Toggle 类，它们需要显示不同的信息。我想我需要使用（这个）来让它工作，它确实可以，只是不在正确的地方.. xD

所以我的问题是，我错过了什么？

应该在其中使用不同文本的东西是：icecenter

按钮为：弹出按钮

    $(document).ready(function () {
        $(".pop-up-button").on('click', function () {
            $("this").toggleClass('active')
                .next().slideToggle('fast');;
        });
    });

.icebody {
    width: 100%;
    height: 900px;
    background-image: url(https://i.imgur.com/vPkkwce.jpg);
    overflow: hidden;
    outline: 1px solid #a4a4a4;
    outline-offset: -1px;
    overflow: hidden;
    position: relative;
}

.iceside {
    position: absolute;
    display: block;
    z-index: 3;
    left: 40px;
    background-color: rgba(246, 245, 249, 0.85);
    width: 140px;
    height: 100%;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.55);
}

.icelines {
    display: block;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.75);
    height: 30px;
    width: 90%;
    position: absolute;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

.iceoverskrift {
    display: block;
    z-index: 2;
    font-size: 35px;
    line-height: 42px;
    position: absolute;
    top: 20px;
    left: 65px;
    color: white;
    font-family: 'Ruthie', cursive;
    transition: all ease-in-out 600ms;
    text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);
}

    .iceoverskrift:hover {
        z-index: 4;
        font-size: 38px;
        left: 30px;
        text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.9);
    }

.iceboblebilled {
    display: block;
    height: 70px;
    width: 70px;
    z-index: 3;
    float: right;
    margin-top: -25px;
    margin-right: -25px;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, 0.75);
    transition: all ease-in-out 600ms;
}

    .iceboblebilled:hover {
        height: 90px;
        width: 90px;
        margin-top: -35px;
        margin-right: -35px;
    }

.icerelationer {
    font-family: calibri;
    font-weight: 900;
    line-height: 26px;
    font-size: 20px;
    color: white;
    text-shadow: -1px -1px 0px #a4a4a4, 1px 1px 0px #a4a4a4, 2px 2px 0px #a4a4a4, 3px 3px 0px #a4a4a4;
    float: right;
    margin-right: 20px;
    cursor: pointer;
    transition: all ease-in-out 600ms;
}

    .icerelationer:hover {
        font-size: 24px;
        margin-right: 15px;
    }

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #fff;
}

::-webkit-scrollbar-thumb {
    background: #9b76be;
    border-radius: 3px;
    transition: all linear 1s;
}

    ::-webkit-scrollbar-thumb:hover {
        background: white;
        border: 1px solid #9b76be;
    }

.pop-up-button {
    text-align: center;
    color: #fff;
    line-height: 50px;
    display: block;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: 1px;
    outline-offset: 0;
    text-shadow: none;
    transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

    .pop-up-button:hover {
    }

.icecenter {
    width: 50%;
    margin: 100px auto;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.75);
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.12, 0.13, 0.14, 0.15);
    display: block;
    position: absolute;
    z-index: 1;
    margin-top: 60px;
    margin-left: 20px;
    background-color: rgba(246, 245, 249, 0.9);
    width: 400px;
    height: 500px;
    padding: 10px 10px 10px 170px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.55);
    -ms-transform: rotate(-1deg); /* IE 9 */
    -webkit-transform: rotate(-1deg); /* Safari 3-8 */
    transform: rotate(-1deg);
    overflow: auto;
}

    .icecenter .icecenter-text {
        text-align: left;
        padding-bottom: 25px;
        pointer-events: none;
    }

        .icecenter .icecenter-text p {
            font-size: 13px;
            Letter-spacing: .5px;
            Line-height: 150%;
            font-family: calibri;
            color: grey;
            margin-top: 20px;
        }

.show .icecenter {
    opacity: 1;
}

@media screen and (max-width: 650px) {
    .pop-up {
        width: 80%;
    }

        .pop-up .pop-up-text {
            font-size: .8em;
        }

    .pop-up-button {
        font-size: .8em;
        width: 80px;
        height: 40px;
        line-height: 40px;
    }
}

<link href="https://fonts.googleapis.com/css?family=Ruthie" rel="stylesheet">
<link href="~/Content/style.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="icebody">

    <div class="iceside">
    </div>
    <div class="iceoverskrift">
        Amarantha Holly Primrose - Ejer af Primrose Paradis
    </div>
    <div class="icelines" style="margin-top:100px;animation: 2s ease-in-out 0s 1 slideInFromLeft;">
        <a class="pop-up-button" onclick="pop-up-button(this)"><img src="https://articlebio.com/uploads/bio/2017/09/07/carson-lueders.jpg" class="iceboblebilled"></a>
        <div class="icerelationer">
            Matheo
        </div>
    </div>

    <div class="icelines" style="margin-top:200px;animation: 3s ease-in-out 0s 1 slideInFromLeft;">
        <a class="pop-up-button"><img src="https://articlebio.com/uploads/bio/2015/11/30/sam-heughan.jpg" class="iceboblebilled"></a>
        <div class="icerelationer">
            Mercurius
        </div>
    </div>

    <div class="icecenter">
        <div class="icecenter-text" onclick="this()">
            <p>Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.</p>
        </div>
    </div>

    <div class="icecenter">
        <div class="icecenter-text">
            <p>Mer</p>
        </div>
    </div>
</div>
<br>

标签： jquerythis

Answer 1

 $(document).ready(function () {
    $(".pop-up-button").on('click', function () {
        $(this).toggleClass('active')
            .next().slideToggle('fast');;
    });
});

使用这个不带引号