在添加课程时遇到冲突

Question

有两个div，点击一个私人div，公共div在那里添加可点击的类。但同一个切换div来自多行，它正在创建类的冲突。

DEMO

Answer 1

您需要根据点击的对象选择元素。在这里你可以做的是根据它的父元素进行选择，你可以使用 parent()

获取父元素

/*Private Public Start*/
$(".public").click(function() {
  var parent = $(this).parent();
  $(this).addClass("clickable");
  $(".bluetext", parent).addClass("hidden")
    .removeClass("show");
  $(".private", parent).removeClass("clickable");
});
$(".private").click(function() {
  var parent = $(this).parent();
  $(this).addClass("clickable");
  $(".bluetext", parent).addClass("show")
    .removeClass("hidden");
  $(".public", parent).removeClass("clickable");
});
/*Private Public End*/

.categorypanel .publicprivate {
  border: 1px solid #D2D2D2;
  width: 118px;
  height: 26px;
  text-align: center;
  vertical-align: middle;
  border-radius: 13px;
}
.categorypanel .publicprivate .public {
  width: 57px;
  line-height: 22px;
  cursor: pointer;
}
.categorypanel .publicprivate .private {
  width: 57px;
  line-height: 22px;
  cursor: pointer;
}
.categorypanel .publicprivate .clickable {
  background: #7961aa;
  color: #ffffff;
  border-radius: 13px;
  cursor: context-menu;
  margin: 1px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="categorypanel">
  <div class="publicprivate">
    <div class="public pull-left clickable">public</div>
    <div class="private pull-left">private</div>
    <div class="clearfix"></div>
  </div>
  <div class="publicprivate">
    <div class="public pull-left clickable">public</div>
    <div class="private pull-left">private</div>
    <div class="clearfix"></div>
  </div>
  <div class="publicprivate">
    <div class="public pull-left clickable">public</div>
    <div class="private pull-left">private</div>
    <div class="clearfix"></div>
  </div>
</div>