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

仅选择下一个元素

2 个答案: