Question

我正在使用toggleClass()函数向剩余的.members-section div元素添加一个类。工作正常，但该类也被添加到当前单击的div中。我如何将类应用于除jQuery中单击的元素之外的其他元素？

$(document).ready(function($) {
  $('#as-member').click(function(e) {
    $('.members-section').toggleClass('unselected');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="members-section" id="as-member">
  <img src="img/test1.jpg" alt="">
  <span>Join as a new member</span>
</div>
<div class="members-section" id="as-student">
  <img src="img/test2.jpg" alt="">
  <span>Join as a student</span>
</div>
<div class="members-section">
  <img src="img/test3,jpg" alt="">
  <span>Upgrade my membership</span>
</div>
<div class="members-section test-members" >
  <h5>Teest...</h5>
  <ul class="member-options">
    <li><span>Discounts</span></li>
    <li><span>Institute access</span></li>
    <li><span>Library access</span></li>
    <li><span>Market events</span></li>
  </ul>
</div>

Answer 1

您可以使用not(this)。它将从jQuery选择中滤除当前单击的元素。

$(document).ready(function($) {
  $('#as-member, #as-student').click(function(e) {
    $(this).removeClass('unselected').siblings().addClass('unselected');
  });
});

.unselected {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="members-section " id="as-member"><img src="img/test1.jpg" alt="">
  <span>Join as a new member</span>
</div>
<div class="members-section " id="as-student"><img src="img/test2.jpg" alt="">
  <span>Join as a student</span>
</div>
<div class="members-section "><img src="img/test3,jpg" alt="">
  <span>Upgrade my membership</span>
</div>
<div class="members-section">
  <h5>Teest...</h5>
  <ul class="member-options">
    <li><span>Discounts</span></li>
    <li><span>Institute access</span></li>
    <li><span>Library access</span></li>
    <li><span>Market events</span></li>
  </ul>
</div>

Answer 2

使用.not($(this))来实现

$('.members-section').not($(this)).toggleClass('unselected');

.unselected{
background-color:#0f0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
    <div class="members-section " id="as-member">
        <img src="img/test1.jpg" alt="">
        <span>Join as a new member</span>
    </div>
    <div class="members-section " id="as-student">
        <img src="img/test2.jpg" alt="">
        <span>Join as a student</span>
    </div>
    <div class="members-section " id="as-test">
        <img src="img/test3,jpg" alt="">
        <span>Upgrade my membership</span>
    </div>
    <div class="members-section" id="as-four">
        <h5>
            Teest...</h5>
        <ul class="member-options">
            <li><span>Discounts</span></li>
            <li><span>Institute access</span></li>
            <li><span>Library access</span></li>
            <li><span>Market events</span></li>
        </ul>
    </div>
    <script>
        $(document).ready(function ($) {
            $(document).ready(function ($) {
                $('#as-member').click(function (e) {
                    if ($(this).hasClass('active-div')) {
                        $('.members-section').removeClass('unselected active-div');
                    }
                    else {
                        $('.members-section').removeClass('unselected');
                        $(this).removeClass('unselected').addClass('active-div').siblings().addClass('unselected').removeClass('active-div');
                        $('#as-four').removeClass('unselected');
                    }
                });

                $('#as-student').click(function (e) {
                    if ($(this).hasClass('active-div')) {
                        $('.members-section').removeClass('unselected active-div');
                    }
                    else {
                        $('.members-section').removeClass('unselected');
                        $(this).removeClass('unselected').addClass('active-div').siblings().addClass('unselected').removeClass('active-div');

                        $('#as-four').removeClass('unselected');
                    }
                });

                $('#as-test').click(function (e) {
                    if ($(this).hasClass('active-div')) {
                        $('.members-section').removeClass('unselected active-div');
                    }
                    else {
                        $('.members-section').removeClass('unselected');
                        $(this).removeClass('unselected').addClass('active-div').siblings().addClass('unselected').removeClass('active-div');

                        $('#as-four').removeClass('unselected');
                    }
                });
            });
        });
    </script>
</body>
</html>

Answer 3

要执行此操作，您可以使用not()排除被点击的.members-section：

$(document).ready(function($) {
  var $sections = $('.members-section').click(function(e) {
    $sections.not(this).toggleClass('unselected');
  });
});

.members-section {
  color: #000;
}
.members-section.unselected {
  color: #CCC;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="members-section" id="as-member">
  <img src="img/test1.jpg" alt="">
  <span>Join as a new member</span>
</div>
<div class="members-section" id="as-student">
  <img src="img/test2.jpg" alt="">
  <span>Join as a student</span>
</div>
<div class="members-section">
  <img src="img/test3,jpg" alt="">
  <span>Upgrade my membership</span>
</div>
<div class="members-section">
  <h5>Teest...</h5>
  <ul class="member-options">
    <li><span>Discounts</span></li>
    <li><span>Institute access</span></li>
    <li><span>Library access</span></li>
    <li><span>Market events</span></li>
  </ul>
</div>

还请注意，使用toggleClass()意味着用户界面在连续点击后会有点不同步。如果您需要这种行为，我建议您修改逻辑。

切换类，但当前单击的元素除外

3 个答案: