すべての要素ではなく、1つの要素のみを選択してください。

Question

私は3-4のチェックボックス（btnA/btnBなど）を持っていますが、最初のチェックボックス以外のすべてのチェックボックスはhidechktextクラスです。私も別にdivの3-4枚の画像を持っていますが、それらはすべてhidechktextクラスを持っています。

私は、チェックボックス（btnA）をクリックしたとき、それはbtnBにあるチェックボックスを変更しますだけでなく、img1がimg2に変更します。チェックボックスを変更することができます。最初のチェックボックス（btnA）をクリックすると、クラスhidechktextがbtnAに追加され、がbtnBから削除されて見えます。私の問題は、私は絵を変更することはできませんです

、チェックボックスは、次のいずれか...
に置き換えしかし、画像の場合には、それはすべての画像に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'); 
}); 

問題をt画像は次の画像に置き換えられるのではなく、btnが置き換えられています。

Answer 1

あなたのスクリプトに問題があるようですが、データ属性を使用してスクリプトを以下のように変更しようとしています。

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