javascript - 单击该类的 jQuery 被添加到一个随机列表项

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>

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

我真的很感激能得到一些帮助。谢谢你

Answer 1

修改“点击”事件的回调如下:

$('.list-wrapper > ul > li').on('click', function(event) {
  event.preventDefault();
  $(this).closest('.pricing-detail-wrapper').find('ul').children().removeClass('selected-plan');
  $(this).closest('.pricing-detail-wrapper').children('.plans-wrap').addClass('hide');
  var identity = $(this).attr('id');
  var $wrap = $('.' + identity + '.plans-wrap');
  $wrap.removeClass('hide');
  $wrap.find("#" + $(this).attr("id")).addClass('selected-plan');
});

为什么

您有多个 .plans-wrap，因此您修改的 .selected-plan 不会显示。您应该找到正确的 .selected-plan 进行修改。