仅选择下一个元素

Question

在我的代码中，我有三个复选框。在三个中，第一个没有类，其余的有hidecheck。现在我想在选中复选框时添加 div 类 hidecheck 并从下一个类中删除 hidecheck '请帮我这样做。

我已经应用了 jQuery 代码，但它只添加了 hidecheck 类并删除了所有下一个 hidecheck 类。

我想要单击第一个复选框时，它将仅显示第二个复选框，然后在第二个复选框上检查时，它将添加 hideclass并从最后一个

中删除

$('.fa-thumbs-o-up').on('click', function() {
  $('.imgtext').addClass('hidechktext');
  $('.imgtext').siblings().next('.imgtext').removeClass('hidechktext');
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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/>
        LikeA
     </p> 
    </label>
  </a>
</div>
<div class="imgtext hidechktext">
  <a class="nextimgs">
    <input class="hidecheck" type="checkbox" name="imganimate" value="img2" id="chkimg1">
    <label for="chkimg1">
     <p> 
        <i class="fa fa-thumbs-o-up fa-3x"></i> <br/>
        LikeB
      </p> 
    </label>
  </a>
</div>
<div class="imgtext hidechktext">
  <a class="nextimgs">
    <input class="hidecheck" type="checkbox" name="imganimate" value="img3" id="chkimg1">
    <label for="chkimg1">
      <p> 
        <i class="fa fa-thumbs-o-up fa-3x"></i> <br/>
        LikeC
      </p> 
    </label>
  </a>
</div>

Answer 1

您可以执行以下操作：

• 获取第一个和最后一个 $('.imgtext') 元素。
• 检查您是否在最后一个 $('.imgtext') 元素中，如果是，则显示第一个 $('.imgtext')。
• 否则在点击时隐藏当前并显示下一个$('.imgtext')。

$('.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');
});

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imgtext">
  <a class="nextimgs">
    <input class="hidecheck" type="checkbox" name="imganimate" value="img1">
    <label for="chkimg1">
      <p> 
        <i class="fa fa-thumbs-o-up fa-3x"></i> <br/>
        LikeA
     </p> 
    </label>
  </a>
</div>
<div class="imgtext hidechktext">
  <a class="nextimgs">
    <input class="hidecheck" type="checkbox" name="imganimate" value="img2">
    <label for="chkimg1">
     <p> 
        <i class="fa fa-thumbs-o-up fa-3x"></i> <br/>
        LikeB
      </p> 
    </label>
  </a>
</div>
<div class="imgtext hidechktext">
  <a class="nextimgs">
    <input class="hidecheck" type="checkbox" name="imganimate" value="img3">
    <label for="chkimg1">
      <p> 
        <i class="fa fa-thumbs-o-up fa-3x"></i> <br/>
        LikeC
      </p> 
    </label>
  </a>
</div>

Answer 2

将您的 jquery 更改为只选择当前的 .imgtext div 并在其上添加类并从其他兄弟姐妹中删除 .imgtext div

$('.fa-thumbs-o-up').on('click',function(){
    vat currentParentElement=$(this).parents('.imgtext:first');
    currentParentElement.addClass('hidechktext');
    currentParentElement.siblings('.imgtext').removeClass('hidechktext');
    $(this).parents('input:first').attr('checked', false);
});