单击函数应用于具有相同类的所有div

时间：2018-09-11 12:07:53

标签： javascript jquery html

我有两个使用相同类构建的面板，但是它们的内容略有不同。我必须根据用户选择的选项来隐藏和切换类。

我已经可以在面板上使用该功能，但是问题是jQuery在单击时会同时应用于两个面板上，这将使面板停止工作。我只希望在单击该特定面板时应用这些功能。

我一直在阅读，我认为通过使用(this)将有助于解决此问题。与使用.each()相同。但是我无法修复它。

已更新

Here is a jsFiddle，显示面板当前的工作方式。 -新小提琴

  • 用户点击第一个面板的“ 1.选择范围”部分中的“每天”选项
  • 这将触发选项'2。选择样式”，然后在“ 1.选择范围”部分中隐藏在第一个面板中
  • 但是，当单击这些选项中的任何一个时，它也将应用到第二个面板，我不希望这样做。仅当用户在该面板中选择选项时，第二个面板才应设置动画。

除非用户在该特定面板中选择了一个选项，否则这些面板不应设置动画。

这是我的jQuery代码：

$('.price-colour li').on('click', function() {
  $('.price-colour li').not(this).removeClass('selected');
  $(this).toggleClass('selected');
})

$('.style-type').on('click', function() {
  $('.style-type').not(this).removeClass('selected');
  $(this).toggleClass('selected');
})

$('#basket-cart').on('click', function() {
  $('#popup-shopping').toggleClass('visible');
})

$('#popup-shopping__close-icon').on('click', function() {
  $('#popup-shopping').toggleClass('visible');
})

$('.edit-txt').on('click', function() {
  $('.range-item').not(this).removeClass('selected');
  $(this).parents().find('.price-item-section').toggleClass('inactive');
  $(this).addClass('hidden');
  $(this).parents().find('.link-btn--solid').toggleClass('inactive');
})

$('.range-item').on('click', function() {
  $('.range-item').not(this).removeClass('selected');
  $(this).toggleClass('selected');
  $('.edit-txt').removeClass('hidden');
  $(this).parents().find('.price-item-section').toggleClass('inactive');
  $(this).parents().find('.link-btn--solid').toggleClass('inactive');
})
body {
  font-size: 14px;
  line-height: 20px;
}

h1,
h2,
h3,
h4,
h5 {
  font-size: 14px;
  line-height: 20px;
}

.o-unlist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.price-item {
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
}

.price-item-top {
  background: black;
  padding: 20px;
  color: white;
}

.price-item-section {
  padding: 15px 30px;
  border-bottom: 2px solid black;
}

.price-item-section.inactive h3 {
  color: #7d7d7d;
}

.price-item-section.inactive .price-range,
.price-item-section.inactive .price-detail,
.price-item-section.inactive .price-style,
.price-item-section.inactive .price-item-three {
  opacity: 0;
  visibility: hidden;
  transform: scaleY(0);
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
  overflow: hidden;
}

.price-range {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
  height: auto;
  transition-duration: 0.3s;
  transition-property: transform;
}

.price-item-three {
  padding: 15px 50px 0;
  border-top: 2px solid black;
  margin: 10px -30px 0;
}

.price-style {
  margin-top: 50px;
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
  height: auto;
  transition-duration: 0.3s;
  transition-property: transform;
}

.price-style p {
  margin: 10px 0 0;
  padding: 0;
  letter-spacing: 0.15px;
}

.style-type {
  opacity: 0.6;
  padding: 5px;
  transition-duration: 0.3s;
  transition-property: all;
  cursor: pointer;
}

.style-type.selected {
  opacity: 1;
}

.price-detail {
  margin-top: 20px;
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
  height: auto;
  transition-duration: 0.3s;
  transition-property: transform;
}

.price-colour {
  list-style: none;
  text-align: center;
  margin: 0 -7px 5px;
  padding: 0;
}

.price-colour li {
  display: inline-block;
  margin: 0 9px;
  padding: 2px;
  border-radius: 100px;
  cursor: pointer;
  border: 1px solid transparent;
  transition-duration: 0.3s;
  transition-property: all;
}

.price-colour li span {
  border-radius: 100px;
  height: 20px;
  width: 20px;
  display: block;
}

.price-colour li#pink span {
  background: pink;
}

.price-colour li#yellow span {
  background: yellow;
}

.price-colour li#black span {
  background: black;
}

.price-colour li#grey span {
  background: #999999;
}

.price-colour li.selected {
  border-color: #999999;
}

.price-size-guide {
  font-size: 1.2rem;
  line-height: 2rem;
  color: $monza;
  text-align: center;
  letter-spacing: 1px;
  border: 1px solid red;
  padding: 5px;
  cursor: pointer;
}

.size-guide-icon {
  background: url(../images/size-guide-icon.jpg) no-repeat;
  width: 25px;
  height: 12px;
  background-size: 25px;
  display: inline-block;
}

#price-select {
  border: 2px solid black;
  font-size: 1.3rem;
  line-height: 1.8rem;
  letter-spacing: 1px;
  padding: 5px;
  display: block;
  width: 100%;
  margin: 10px 0;
}

.radio-indicator {
  position: absolute;
  top: 0px;
  left: 0;
  height: 20px;
  width: 20px;
  background: white;
  border: 2px solid black;
  border-radius: 100px;
  transition-duration: 0.3s;
  transition-property: all;
}

.radio-select {
  cursor: pointer;
  font-size: 1.4rem;
  letter-spacing: 2px;
  position: relative;
  padding: 0 0 0 30px;
  margin: 0;
}

.radio-select:first-child {
  margin-right: 43px;
}

.radio-select input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.radio-select input:checked~.radio-indicator {
  background: red;
}

.radio-select a {
  font-size: 1.1rem;
  line-height: 1.1rem;
  color: $heli;
  display: block;
  font-family: $grotesk;
  font-weight: $groreg;
  letter-spacing: 1px;
}

.edit-txt {
  cursor: pointer;
  font-size: 1.5rem;
  z-index: 10;
  position: relative;
  transition-duration: 0.3s;
  transition-property: all;
  font-size: 14px;
  line-height: 20px;
}

.edit-txt.hidden {
  opacity: 0;
  visibility: hidden;
}

.range-item {
  display: inline-block;
  text-align: center;
  padding: 35px 35px 20px 0;
  cursor: pointer;
}

.range-item img {
  width: 31px;
  height: 31px;
  border-radius: 100px;
  padding: 2px;
  border: 1px solid transparent;
}

.range-item p {
  margin: 10px 0 0 0;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1.8rem;
  letter-spacing: 1px;
  font-family: $grotesk;
  font-weight: $groreg;
}

.range-item.selected img {
  border-color: #999999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
  <div class="row">
    <div class="col-lg-7">
      image in here

    </div>
    <div class="col-lg-5">

      <div class="price-item">
        <div class="price-item-top">
          <h3 class="heading-price">Choose your bottoms</h3>
        </div>
        <div class="price-item-one price-item-section clearfix inactive">
          <div class="clearfix">
            <h3 class="heading-price float-left">1. choose your range: lace</h3>
            <span class="edit-txt float-right">edit</span>
          </div>
          <ul class="price-range o-unlist clearfix">
            <li id="lace" class="range-item selected">
              <img src="https://via.placeholder.com/31x31" />
              <p>lace</p>
            </li>
            <li id="everyday" class="range-item">
              <img src="https://via.placeholder.com/31x31" />
              <p>everday</p>
            </li>
            <li id="adventure" class="range-item">
              <img src="https://via.placeholder.com/31x31" />
              <p>adventure</p>
            </li>
            <li id="slogan" class="range-item">
              <img src="https://via.placeholder.com/31x31" />
              <p>slogan</p>
            </li>
          </ul>
        </div>
        <div class="price-item-two price-item-section clearfix">
          <h3 class="heading-price">2. choose your style</h3>
          <div class="clearfix">
            <div class="price-style float-left">
              <div class="row">
                <div class="col-sm-6 o-txt-center">
                  <div id="style-brief" class="style-type selected">
                    <img src="https://via.placeholder.com/63x40" width="63" />
                    <p>brief</p>
                  </div>
                </div>
                <div class="col-sm-6 o-txt-center">
                  <div id="style-thong" class="style-type">
                    <img src="https://via.placeholder.com/63x40" width="63" />
                    <p>thong</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="price-detail float-right">
              <ul class="price-colour">
                <li id="pink" class="selected"><span></span></li>
                <li id="yellow"><span></span></li>
                <li id="black"><span></span></li>
                <li id="grey"><span></span></li>
              </ul>
              <div class="price-size-guide" data-toggle="modal" data-target="#popup-size-guide">
                redefining size guide <i class="size-guide-icon"></i>
              </div>
              <select id="price-select">
                <option value="small">small (8/10)</option>
                <option value="medium">medium (12/14)</option>
                <option value="large">large (16/18)</option>
              </select>
            </div>
          </div>
          <div class="price-item-three clearfix">
            <label class="radio-select float-left">buy once £28
                    <input type="radio" name="radio" checked="checked"/>
                    <div class="radio-indicator"></div>
                  </label>
            <label class="radio-select float-right">get monthly £24
                    <a href="#" class="how-sub" data-toggle="modal" data-target="#popup-subscription">how subscription works</a>
                    <input type="radio" name="radio"/>
                    <div class="radio-indicator"></div>
                  </label>
          </div>
        </div>
      </div>
      <!-- price item-->
    </div>
    <!--col lg 5-->
  </div>
  <!-- row-->
  <div class="row">
    <div class="col-lg-7">
      image in here

    </div>
    <div class="col-lg-5">
      <div class="price-item">
        <div class="price-item-top">
          <h3 class="heading-price">Choose your top</h3>
        </div>
        <div class="price-item-one price-item-section clearfix">
          <div class="clearfix">
            <h3 class="heading-price float-left">1. choose your range: lace</h3>
            <span class="edit-txt float-right">edit</span>
          </div>
          <ul class="price-range o-unlist clearfix">
            <li id="lace" class="range-item selected">
              <img src="https://via.placeholder.com/31x31" />
              <p>lace</p>
            </li>
            <li id="everyday" class="range-item">
              <img src="https://via.placeholder.com/31x31" />
              <p>everday</p>
            </li>
            <li id="adventure" class="range-item">
              <img src="https://via.placeholder.com/31x31" />
              <p>adventure</p>
            </li>
            <li id="slogan" class="range-item">
              <img src="https://via.placeholder.com/31x31" />
              <p>slogan</p>
            </li>
          </ul>
        </div>
        <div class="price-item-two price-item-section clearfix inactive">
          <h3 class="heading-price">2. choose your style</h3>
          <div class="clearfix">
            <div class="price-style float-left">
              <div class="row">
                <div class="col-sm-6 o-txt-center">
                  <div id="style-bra" class="style-type selected">
                    <img src="https://via.placeholder.com/63x40" width="63" />
                    <p>bra</p>
                  </div>
                </div>
                <div class="col-sm-6 o-txt-center">
                  <div id="style-bralette" class="style-type">
                    <img src="https://via.placeholder.com/63x40" width="63" />
                    <p>bralette</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="price-detail float-right">
              <ul class="price-colour">
                <li id="pink" class="selected"><span></span></li>
                <li id="yellow"><span></span></li>
                <li id="black"><span></span></li>
                <li id="grey"><span></span></li>
              </ul>
              <div class="price-size-guide" data-toggle="modal" data-target="#popup-size-guide">
                redefining size guide <i class="size-guide-icon"></i>
              </div>
              <select id="price-select">
                <option value="small">small (8/10)</option>
                <option value="medium">medium (12/14)</option>
                <option value="large">large (16/18)</option>
              </select>
            </div>
          </div>
          <div class="price-item-three clearfix">
            <label class="radio-select float-left">buy once £28
                    <input type="radio" name="radio" checked="checked"/>
                    <div class="radio-indicator"></div>
                  </label>
            <label class="radio-select float-right">get monthly £24
                    <a href="#" class="how-sub" data-toggle="modal" data-target="#popup-subscription">how subscription works</a>
                    <input type="radio" name="radio"/>
                    <div class="radio-indicator"></div>
                  </label>
          </div>
        </div>
      </div>
      <div>
        <!--col lg 5-->
      </div>
      <!-- row-->

</section>

1 个答案:

答案 0 :(得分：1)

您的parents()选择器正在选择所有父母。将closest()与选择器一起使用只能在该元素下方切换子级。

    $(this).closest('.price-item').find('.price-item-section').toggleClass('inactive');
相关问题
最新问题