单击div

Question

当我单击div时，我希望div更改颜色并扩展110％以在另一列中覆盖div。

这可行，但是当我单击另一个div时，它们都保留了更改颜色的类，如何设置颜色，以便只有被单击的div才能保留添加的类

$(document).ready(function(){
   $("#q2").hide() 
   $("#q3").hide() 
       $(".question-div").on('click',function(){
       var target = $(this).attr('rel');
        $("p").removeClass("primary-question");
        //$(this).removeClass("primary-question")
        $("#"+target).show().siblings("div").hide();
        $(this).addClass("primary-question");
    })
});

  .question-div:hover {
    background-color: #D0ECF8;
    /*padding: 15px;*/
    margin-bottom: 5px;
    width: 110%;
    cursor: pointer;
  }
  .primary-question {
  background-color: #D0ECF8;
  /*padding: 15px;*/
  margin-bottom: 5px;
  width: 110%;
  cursor: pointer;
}
.question-div-answer {
  background-color: #D0ECF8;
  padding: 15px;
  height: 91%;
  border-radius: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row no-gutters">
                <div class="col-12 col-md-6">
                    <div class="question-div" rel="q1">
                        <p class="strong-text primary-question">Question 1</p>
                    </div>
                    <div class="question-div" rel="q2">
                        <p class="strong-text">Question 2</p>
                    </div>
                    <div class="question-div" rel="q3">
                        <p class="strong-text">Question 3</p>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div id="q1" class="question-div-answer">
                        <p>Answer question 1</p>
                    </div>
                    <div id="q2" class="question-div-answer">
                        <p>Answer question 2</p>
                    </div>
                    <div id="q3" class="question-div-answer">
                        <p>Answer question 3</p>
                    </div>
                </div>
            </div>
</div>

Answer 1

使用not()函数可返回与选择器不匹配的元素。

jQuery脚本：

 $(document).ready(function() {
      $(".question-div").on('click',function() {
              $(this).addClass("primary-question");
              $(".question-div").not($(this)).removeClass("primary-question");
              var target = $(this).attr('rel');
              $("#"+target).show().siblings("div").hide();

          })
      });