只選擇一個元素，不是所有的元素 - 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>