Question

我有3-4复选框（btnA / btnB等），除了第一个复选框，所有其他复选框都有hidechktext类。我在单独的div中也有3-4张图片，除了一张他们都有hidechktext类。

我想点击复选框（btnA），它会将复选框更改为btnB，并将img1更改为img2。我可以更改复选框...当我单击第一个复选框（btnA）时，它将类hidechktext添加到btnA并从{{1}中删除类hidechktext这样就可以看出来了。

我的问题是我无法更改图片，复选框被下一个替换...
但是在图像的情况下，它会向所有图像添加btnB，这就是为什么在点击复选框后没有显示图像。

请帮助我这样做只是一个小问题。

HTML代码

hidechktext

CSS代码

<div class="col-lg-6 col-md-6 col-sm-12 col-12 halftop" align="center">
  <div class="card" style="width:100%;" align="center">
    <!---Image type animation--> 
    <div class="imgall">
      <figure class="imgmain">
        <img src="img/pane/pane1.jpg" alt="">
      </figure>
      <figure class="imgmain hidechktext">
        <img src="img/pane/pane2.jpg" alt="">
      </figure>
      <figure class="imgmain hidechktext">
        <img src="img/pane/pane3.jpg" alt="">
      </figure>
    </div>
    <!---Image type animation-->
  </div>
</div>
<!---First like button-->
<div class="col-2 mobileview halftoplike text-center">
  <div class="imgtext">      
    <a class="nextimgs">
      <input class="hidecheck" type="checkbox" name="imganimate" value="img1" id="chkimg1">
      <label for="chkimg1">
        <p> 
          <i class="fa fa-thumbs-o-up fa-3x"></i> <br/>
          BtnA
        </p> 
      </label> 
    </a>
  </div>
  <div class="imgtext hidechktext">      
    <a class="nextimgs">
      <input class="hidecheck" type="checkbox" name="imganimate" value="img2" id="chkimg2">
      <label for="chkimg2">
        <p> 
          <i class="fa fa-thumbs-o-up fa-3x"></i> <br/>
          BtnB
        </p> 
      </label> 
    </a>
  </div>
  <div class="imgtext hidechktext">      
    <a class="nextimgs">
      <input class="hidecheck" type="checkbox" name="imganimate" value="img3" id="chkimg3">
      <label for="chkimg3">
        <p> 
          <i class="fa fa-thumbs-o-up fa-3x"></i> <br/>
          BtnC
        </p> 
      </label> 
    </a>
  </div>

jQuery代码

.hidechktext{
  opacity: 0;
  display: none;
}

问题是图像没有替换下一张图像，但是btn正在替换。

Answer 1

似乎您的脚本存在一些问题，我只是尝试使用数据属性更改您的脚本。

＆＃13;

//for checkbox btn change
$('.checkMe').on('click', function() {
  var LikeC = $('.imgtext').last();
  var LikeA = $('.imgtext').first();
  if (!LikeC.hasClass("hidechktext")) {
    LikeA.removeClass('hidechktext');
  }
  $(this).siblings().parents('.imgtext').next().removeClass('hidechktext');
  $(this).parents('.imgtext').addClass('hidechktext');
});

//for image change    
$('.checkMe').on('click', function() {
  var imgFigure = $(this).data('img');
  $('.imgmain').each(function() {
    if ($(this).hasClass(imgFigure)) {
      $(this).removeClass('hidechktext');
    } else {
      $(this).addClass('hidechktext');
    }
  });

});

＆＃13;

.hidechktext {
  opacity: 0;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-6 col-md-6 col-sm-12 col-12 halftop" align="center">
  <div class="card" style="width:100%;" align="center">
    <!---Image type animation-->
    <div class="imgall">
      <figure class="imgmain imgFigure1">
        <img src="http://i.imgur.com/OXT6itR.png" alt="">
      </figure>
      <figure class="imgmain imgFigure2 hidechktext">
        <img src="https://i.pinimg.com/736x/07/c6/8b/07c68b13577d92dbabd5ca096ef5868f--fractal-images-art-fractal.jpg" alt="">
      </figure>
      <figure class="imgmain imgFigure3 hidechktext">
        <img src="http://picpulp.com/wp-content/uploads/2013/05/tumblr_m5fj2mynYy1rwswb1o1_500.jpg" alt="">
      </figure>
    </div>
    <!---Image type animation-->
  </div>
</div>
<!---First like button-->
<div class="col-2 mobileview halftoplike text-center">
  <div class="imgtext">
    <a class="nextimgs">
      <input class="hidecheck" type="checkbox" name="imganimate" value="img1" id="chkimg1">
      <label class="checkMe" for="chkimg1" data-img="imgFigure2">
        <p>
          <i class="fa fa-thumbs-o-up fa-3x"></i>
          <br/> BtnA
        </p>
      </label>
    </a>
  </div>
  <div class="imgtext hidechktext">
    <a class="nextimgs">
      <input class="hidecheck" type="checkbox" name="imganimate" value="img2" id="chkimg2">
      <label class="checkMe" for="chkimg2" data-img="imgFigure3">
        <p>
          <i class="fa fa-thumbs-o-up fa-3x"></i>
          <br/> BtnB
        </p>
      </label>
    </a>
  </div>
  <div class="imgtext hidechktext">
    <a class="nextimgs">
      <input class="hidecheck" type="checkbox" name="imganimate" value="img3" id="chkimg3">
      <label class="checkMe" for="chkimg3" data-img="imgFigure1">
        <p>
          <i class="fa fa-thumbs-o-up fa-3x"></i>
          <br/> BtnC
        </p>
      </label>
    </a>
  </div>

＆＃13;

只选择一个元素，而不是所有元素 - jQuery

1 个答案: