on click函数应用于具有相同类的所有div

Posted 2023-02-26

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

我已经为面板提供了功能，但问题是jQuery在点击的同时应用于两个面板，然后停止面板工作我想要的方式。我只希望在点击该特定面板时应用这些功能。

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

---

更新

Here is a jsFiddle，展示了这些小组目前的工作方式。 - 新小提琴

• 用户点击第一个面板的“1.选择您的范围”部分中的“每天”选项
• 这会触发选项'2。选择你的风格'出现'和'选择你的范围'部分隐藏在第一个面板中
• 但是，当点击任何这些选项时，它也应用于第二个面板，这是我不想要的。第二个面板应仅在用户选择该面板中的选项时进行动画处理。

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

这是我的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>

答案

你的parents()选择器正在选择所有父母。使用带有选择器的closest()只能在该元素下面切换子项。

    $(this).closest('.price-item').find('.price-item-section').toggleClass('inactive');