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

Question

我有3-4复选框（btnA/btnB等），他们除了首先复选框所有其他复选框有hidechktext类。我也有独立的div 3-4图像，除了他们都有hidechktext类。

我想，当我点击复选框（btnA）将复选框改为btnB以及改变img1到img2。我可以更改复选框...当我点击第一个复选框（btnA）时，它的意思是将类hidechktext添加到btnA，并从btnB中删除类hidechktext，以便可以看到它。

我的问题是我无法改变的图片，复选框被下一个替代...
但在图像的情况下，增加了hidechktext到的所有图像，这就是为什么点击复选框没有图像显示后。

请帮助我做到这一点，它只是一个小问题。

HTML代码

<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> 

CSS代码

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

jQuery代码

//for checkbox btn change 
$('.fa-thumbs-o-up').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  

$('.fa-thumbs-o-up').on('click', function() { 
    $('.imgall').children().siblings('.imgmain:first').removeClass('hidechktext'); 
    $('.imgmain').prepend().addClass('hidechktext'); 
}); 

问题是吨他的形象并没有取代下一个形象，但BTN正在取代。

Answer 1

好像你的脚本存在一些问题，我只是试着通过使用data属性来改变你的脚本。

//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'); 
 
    } 
 
    }); 
 

 
});

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

<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>