单击一个元素从另一个元素添加/删除类

时间：2018-06-16 14:46:13

标签： javascript jquery

我在使用javascript工作时遇到问题。当用户单击导航项（在本例中为输入）时，“活动”类将添加到相应的幻灯片中。这是我目前正在使用的代码：

$(document).ready(function(){
    $('#slide'+ (i+1)) +.click(function(event){
        //remove all pre-existing active classes
        $('.top').removeClass('active');

        //add the active class to the link we clicked
        $(this).addClass('active');

    });
});
.wrapper {
  max-width: 350px;
  margin: 0 auto;
  position: relative;
}

input {
  display: none;
}

.inner {
  width: 500%;
  line-height: 0;
}


article {
  width: 20%;
  float: left;
  position: relative;
}

article img {
  width: 100%;
}

.slider-dot-control {
  position: absolute;
  width: 100%;
  top: 110%;
  text-align: center;
}

.slider-dot-control label {
  cursor: pointer;
  border-radius: 5px;
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #bbb;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.slider-dot-control label:hover {
  background: #ccc;
  border-color: #777;
}


/* Top Layer */
.top {
  position: absolute;
}


@keyframes top {
  from { top: 0; right: -250px; }
  to   { top: 0; right: 100px; }
}

.active {
  animation-duration: 2s;
  animation-name: top;
  animation-fill-mode: forwards;
}




/* Slider Styling */
.slider-wrapper {
  width: 100%;
  overflow: hidden;
  background: #fff;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}

.slider-wrapper .inner {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: all 800ms;
  -moz-transition: all 800ms;
  transition: all 800ms;
}



/*---- SET POSITION FOR SLIDE ----*/
#slide1:checked ~ .slider-prev-next-control label:nth-child(2)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(5)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(1)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(1)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(2)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide1:checked ~ .slider-prev-next-control label:nth-child(5)::after {
  display: block;
}

#slide1:checked ~ .slider-prev-next-control label:nth-child(2)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(5)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(1)::after {
  content: "\f105";
  padding-left: 15px;
}

#slide1:checked ~ .slider-prev-next-control label:nth-child(2), #slide2:checked ~ .slider-prev-next-control label:nth-child(3), #slide3:checked ~ .slider-prev-next-control label:nth-child(4), #slide4:checked ~ .slider-prev-next-control label:nth-child(5), #slide5:checked ~ .slider-prev-next-control label:nth-child(1) {
  display: block;
  float: right;
  margin-right: 5px;
}


#slide2:checked ~ .slider-prev-next-control label:nth-child(1), #slide3:checked ~ .slider-prev-next-control label:nth-child(2), #slide4:checked ~ .slider-prev-next-control label:nth-child(3), #slide5:checked ~ .slider-prev-next-control label:nth-child(4), #slide1:checked ~ .slider-prev-next-control label:nth-child(5) {
  display: block;
  float: left;
  margin-left: 5px;
}

#slide2:checked ~ .slider-prev-next-control label:nth-child(1)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(2)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide1:checked ~ .slider-prev-next-control label:nth-child(5)::after {
  content: "\f104";
  padding-left: 8px;
}

#slide1:checked ~ .slider-dot-control label:nth-child(1), #slide2:checked ~ .slider-dot-control label:nth-child(2), #slide3:checked ~ .slider-dot-control label:nth-child(3), #slide4:checked ~ .slider-dot-control label:nth-child(4), #slide5:checked ~ .slider-dot-control label:nth-child(5) {
  background: #333;
}

#slide1:checked ~ .slider-wrapper article:nth-child(1) .top, #slide2:checked ~ .slider-wrapper article:nth-child(2) .top, #slide3:checked ~ .slider-wrapper article:nth-child(3) .top, #slide4:checked ~ .slider-wrapper article:nth-child(4) .top, #slide5:checked ~ .slider-wrapper article:nth-child(5) .top {
  opacity: 1;
}

#slide1:checked ~ .slider-wrapper .inner {
  margin-left: 0%;
}

#slide2:checked ~ .slider-wrapper .inner {
  margin-left: -100%;
}

#slide3:checked ~ .slider-wrapper .inner {
  margin-left: -200%;
}

#slide4:checked ~ .slider-wrapper .inner {
  margin-left: -300%;
}

#slide5:checked ~ .slider-wrapper .inner {
  margin-left: -400%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <input checked type=radio name="slider" id="slide1" />
    <input type=radio name="slider" id="slide2" />
    <input type=radio name="slider" id="slide3" />
    <input type=radio name="slider" id="slide4" />
    <input type=radio name="slider" id="slide5" />
    <div class="slider-wrapper">
      <div class="inner">
        <article>
          <div class="top active">
            <img src="http://via.placeholder.com/75x150/ff0000">
          </div>
          <img src="http://via.placeholder.com/350x150">
        </article>
        <article>
          <div class="top">
            <img src="http://via.placeholder.com/75x150/ff0000">
          </div>
          <img class="bkg-image" src="http://via.placeholder.com/350x150">
        </article>
        <article>
          <div class="top">
            <img src="http://via.placeholder.com/75x150/ff0000">
          </div>
          <img src="http://via.placeholder.com/350x150">
        </article>
        <article>
          <div class="top">
            <img src="http://via.placeholder.com/75x150/ff0000">
          </div>
          <img class="bkg-image" src="http://via.placeholder.com/350x150">
        </article>
        <article>
          <div class="top">
            <img src="http://via.placeholder.com/75x150/ff0000">
          </div>
          <img class="bkg-image" src="http://via.placeholder.com/350x150">
        </article>
    </div>
    <!-- .inner -->
  </div>
  <!-- .slider-wrapper -->
  

  <div class="slider-dot-control">
    <label for=slide1></label>
    <label for=slide2></label>
    <label for=slide3></label>
    <label for=slide4></label>
    <label for=slide5></label>
  </div>



</div>

2 个答案:

答案 0 :(得分：0)

在+之前移除.click并将您的代码更改为

$(document).ready(function(){
   $('#slide'+ (i+1)).click(function(event){
       //remove all pre-existing active classes
       $('.top').removeClass('active');

       //add the active class to the link we clicked
       $(this).addClass('active');

   });
});

答案 1 :(得分：0)

首先，点击事件的i未定义。由于您的单选按钮具有不同的ID，因此最好使用类或按钮名称进行单击事件。接下来，您已将active类添加到带有$(this).addClass('active');的单击元素，即您已将active类添加到单选按钮。在这里，您需要更改代码，我添加了$('.slider-wrapper').find('article').eq($(this).index()).find('.top').addClass('active');它会将活动类添加到top元素的article选择器中，该元素的索引等于clicked元素。

＆＃13;
＆＃13; 
$(document).ready(function(){
   $('input[name="slider"]').click(function(event){
       //remove all pre-existing active classes
       $('.top').removeClass('active');

       //add the active class to the link we clicked
       $('.slider-wrapper').find('article').eq($(this).index()).find('.top').addClass('active');

   });
});
＆＃13; 
.wrapper {
  max-width: 350px;
  margin: 0 auto;
  position: relative;
}

input {
  display: none;
}

.inner {
  width: 500%;
  line-height: 0;
}


article {
  width: 20%;
  float: left;
  position: relative;
}

article img {
  width: 100%;
}

.slider-dot-control {
  position: absolute;
  width: 100%;
  top: 110%;
  text-align: center;
}

.slider-dot-control label {
  cursor: pointer;
  border-radius: 5px;
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #bbb;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.slider-dot-control label:hover {
  background: #ccc;
  border-color: #777;
}


/* Top Layer */
.top {
  position: absolute;
}


@keyframes top {
  from { top: 0; right: -250px; }
  to   { top: 0; right: 100px; }
}

.active {
  animation-duration: 2s;
  animation-name: top;
  animation-fill-mode: forwards;
}




/* Slider Styling */
.slider-wrapper {
  width: 100%;
  overflow: hidden;
  background: #fff;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}

.slider-wrapper .inner {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: all 800ms;
  -moz-transition: all 800ms;
  transition: all 800ms;
}



/*---- SET POSITION FOR SLIDE ----*/
#slide1:checked ~ .slider-prev-next-control label:nth-child(2)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(5)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(1)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(1)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(2)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide1:checked ~ .slider-prev-next-control label:nth-child(5)::after {
  display: block;
}

#slide1:checked ~ .slider-prev-next-control label:nth-child(2)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(5)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(1)::after {
  content: "\f105";
  padding-left: 15px;
}

#slide1:checked ~ .slider-prev-next-control label:nth-child(2), #slide2:checked ~ .slider-prev-next-control label:nth-child(3), #slide3:checked ~ .slider-prev-next-control label:nth-child(4), #slide4:checked ~ .slider-prev-next-control label:nth-child(5), #slide5:checked ~ .slider-prev-next-control label:nth-child(1) {
  display: block;
  float: right;
  margin-right: 5px;
}


#slide2:checked ~ .slider-prev-next-control label:nth-child(1), #slide3:checked ~ .slider-prev-next-control label:nth-child(2), #slide4:checked ~ .slider-prev-next-control label:nth-child(3), #slide5:checked ~ .slider-prev-next-control label:nth-child(4), #slide1:checked ~ .slider-prev-next-control label:nth-child(5) {
  display: block;
  float: left;
  margin-left: 5px;
}

#slide2:checked ~ .slider-prev-next-control label:nth-child(1)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(2)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide1:checked ~ .slider-prev-next-control label:nth-child(5)::after {
  content: "\f104";
  padding-left: 8px;
}

#slide1:checked ~ .slider-dot-control label:nth-child(1), #slide2:checked ~ .slider-dot-control label:nth-child(2), #slide3:checked ~ .slider-dot-control label:nth-child(3), #slide4:checked ~ .slider-dot-control label:nth-child(4), #slide5:checked ~ .slider-dot-control label:nth-child(5) {
  background: #333;
}

#slide1:checked ~ .slider-wrapper article:nth-child(1) .top, #slide2:checked ~ .slider-wrapper article:nth-child(2) .top, #slide3:checked ~ .slider-wrapper article:nth-child(3) .top, #slide4:checked ~ .slider-wrapper article:nth-child(4) .top, #slide5:checked ~ .slider-wrapper article:nth-child(5) .top {
  opacity: 1;
}

#slide1:checked ~ .slider-wrapper .inner {
  margin-left: 0%;
}

#slide2:checked ~ .slider-wrapper .inner {
  margin-left: -100%;
}

#slide3:checked ~ .slider-wrapper .inner {
  margin-left: -200%;
}

#slide4:checked ~ .slider-wrapper .inner {
  margin-left: -300%;
}

#slide5:checked ~ .slider-wrapper .inner {
  margin-left: -400%;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <input checked type=radio name="slider" id="slide1" />
    <input type=radio name="slider" id="slide2" />
    <input type=radio name="slider" id="slide3" />
    <input type=radio name="slider" id="slide4" />
    <input type=radio name="slider" id="slide5" />
    <div class="slider-wrapper">
      <div class="inner">
        <article>
          <div class="top active">
            <img src="http://via.placeholder.com/75x150/ff0000">
          </div>
          <img src="http://via.placeholder.com/350x150">
        </article>
        <article>
          <div class="top">
            <img src="http://via.placeholder.com/75x150/ff0000">
          </div>
          <img class="bkg-image" src="http://via.placeholder.com/350x150">
        </article>
        <article>
          <div class="top">
            <img src="http://via.placeholder.com/75x150/ff0000">
          </div>
          <img src="http://via.placeholder.com/350x150">
        </article>
        <article>
          <div class="top">
            <img src="http://via.placeholder.com/75x150/ff0000">
          </div>
          <img class="bkg-image" src="http://via.placeholder.com/350x150">
        </article>
        <article>
          <div class="top">
            <img src="http://via.placeholder.com/75x150/ff0000">
          </div>
          <img class="bkg-image" src="http://via.placeholder.com/350x150">
        </article>
    </div>
    <!-- .inner -->
  </div>
  <!-- .slider-wrapper -->
  

  <div class="slider-dot-control">
    <label for=slide1></label>
    <label for=slide2></label>
    <label for=slide3></label>
    <label for=slide4></label>
    <label for=slide5></label>
  </div>



</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题