Question

我有一个简单的代码，在点击列表项后，会向该特定项添加一个类，但会将其从剩余的li项中删除。

添加的类会更改一些样式。

这就是我的问题是样式更改发生在随机列表项上，即使该类已添加到正确的列表项中。我不知道它为什么会那样行事

以下是我的代码的几个片段。我不能真正发布整个代码，因为它包含三个文件，而且只会填充这个地方。请点击plunkr链接。

<div class="plans-wrap twelve1">
    <div class="plans-one">
        <h1 class="plans-one-header">Plans</h1>
        <div class="plans-select-wrapper">
            <div class="plans-select">
                <img src="assets/img/arrow.png" alt="" class="hide back-plans">
                <div class="list-wrapper">
                    <ul>
                        <li id="twelve1" class="selected-plan">12 Hours(1M)</li>
                        <li id="twenty1">24 Hours(1M)</li>
                        <li id="twelve3">12 Hours(3M)</li>
                        <li id="twenty3">24 Hours(3M)</li>
                    </ul>
                </div>
                <img src="assets/img/arrow.png" alt="" class="next-plans">
            </div>
        </div>
        <div class="plans-description">
            <h4>Workspace</h4>
            <p>A dedicated desk and access to community, benefits and events for a month.</p>
        </div>
        <div class="plans-description">
            <h4>Credits</h4>
            <p>144 credits per month to book conference rooms and utilise for other TFC benefits.</p>
        </div>
        <div class="plans-description">
            <h4>Access</h4>
            <p>1 location, 1 Month, Mon-Sat (8 AM to 9 PM).</p>
        </div>
    </div>
<style>
    .plans-select>.list-wrapper>ul>li {
        display: inline-block;
        position: relative;
        /*left: 0;*/
        overflow: hidden;
        font-size: 1.25rem;
        font-family: 'Lato', sans-serif;
        margin-left: 4%;
        /*padding: 1rem;*/
        color: #9B9B9B;
        text-align: center;
        transition: left 0.4s;
    }

    .plans-select>.list-wrapper>ul>li:nth-of-type(1) {
        margin-left: 0;
    }

    .plans-select>ul>li:nth-of-type(1) {
        margin-left: 0;
    }

    .plans-one-header {
        font-family: 'Lato', sans-serif;
        font-size: 2.3rem;
        font-weight: 600;
        line-height: 44px;
    }

    .plans-select>.list-wrapper>ul>.selected-plan {
        border-bottom: 3px solid #EF5138;
        color: #EF5138;
    }

    .plans-description {
        margin-top: 3.3rem;
    }

    .plans-description:nth-of-type(1) {
        margin-top: 2.1rem;
    }

    .plans-description>h4 {
        font-weight: bold;
        font-size: 1.4rem;
        line-height: 1.57rem;
        font-family: 'Lato', sans-serif;
    }

    .plans-description>p {
        font-family: 'Lato', sans-serif;
        font-size: 1.3rem;
        line-height: 1.57rem;
    }

    .plans-two>.plan-amenities {
        margin-top: 2.5rem;
    }

    .plan-amenities>.plan-amenity-icon {
        margin-left: 1.4rem;
    }

    .plan-amenities>.plan-amenity-icon:nth-of-type(1) {
        margin-left: 0;
    }

    .plans-wrap {
        display: flex;
        justify-content: space-between;
    }

    .plans-two>.pricing-btn {
        width: 65%;
        background-color: #EF5138;
        border-radius: 5px;
        padding: 1.4rem 0;
        border: none;
        font-weight: 900;
        font-size: 1.4rem;
        margin-top: 4rem;
        margin-left: 0.8rem;
        color: white;
        font-family: 'Lato', sans-serif;    
    }
</style>
<script>
    $('.list-wrapper > ul > li').on('click', function(event){
        event.preventDefault();
        $(this).closest('ul').children().removeClass('selected-plan');
        $(this).closest('.pricing-detail-wrapper').children('.plans-wrap').addClass('hide');
        var identity = $(this).attr('id');
        $('.' + identity + '.plans-wrap').removeClass('hide');
        $(this).addClass('selected-plan');
    });
</script>

这是我的plunker https://plnkr.co/edit/sjY7n3VCUJJHsTN01DyX?p=preview

链接

我真的很感激它的一些帮助。谢谢

Answer 1

更改“click”事件的回调，如下所示：

str = 'İşbirliği'
print(str)
print(str.lower())

WHY

你有多个.plans-wrap，所以你修改的.selected-plan不会显示。你应该找到正确的.selected-plan来修改。

jQuery点击该类正被添加到随机列表项中

1 个答案:

WHY