Question

我正在寻找jQuery代码，以防我单击ID为group的div，将一个类添加到了前面的那个类中。

<div class="contact-form-conditional">
  <div id="group-805" data-class="wpcf7cf_group" class="wpcf7cf-hidden"></div>
  <div id="group-806" data-class="wpcf7cf_group" class="wpcf7cf-hidden"></div>
  <div id="group-807" data-class="wpcf7cf_group" class="wpcf7cf-hidden"></div>
  <div id="group-808" data-class="wpcf7cf_group" class="wpcf7cf-hidden"></div>
  <div id="group-809" data-class="wpcf7cf_group" class="wpcf7cf-hidden"></div>
  <div id="group-810" data-class="wpcf7cf_group" class="wpcf7cf-hidden"></div>
</div>

jQuery('.wpcf7-form').on('click', function() {
  if (jQuery('#group-807').hasClass("focused")) {
    jQuery('#group-806').removeClass("focused");
  } else {
    jQuery('#group-807').addClass("focused");
    jQuery('#group-807').addClass("hereAgain");
  }    
});

但是，这只会将一个类添加到刚刚单击的类中。你知道一种方法吗？

Answer 1

只需遍历该类并删除现有的类focused并添加到上一个类即可。

$('.wpcf7cf-hidden').on('click',function(){
$(".wpcf7cf-hidden").each(function(){
    $(this).removeClass("focused");
})
  $(this).prev().addClass('focused');
})

.focused {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contact-form-conditional">
    <div id="group-805" data-class="wpcf7cf_group" class="wpcf7cf-hidden">1</div>
    <div id="group-806" data-class="wpcf7cf_group" class="wpcf7cf-hidden">2</div>
    <div id="group-807" data-class="wpcf7cf_group" class="wpcf7cf-hidden">3</div>
    <div id="group-808" data-class="wpcf7cf_group" class="wpcf7cf-hidden">4</div>
    <div id="group-809" data-class="wpcf7cf_group" class="wpcf7cf-hidden">5</div>
    <div id="group-810" data-class="wpcf7cf_group" class="wpcf7cf-hidden">6</div>
</div>

Answer 2

我认为您正在尝试将类从当前div添加到上一个div

HTML代码

<div class="contact-form-conditional">
    <div id="group-805" data-class="wpcf7cf_group" class="wpcf7cf-hidden divClass">1</div>
    <div id="group-806" data-class="wpcf7cf_group" class="wpcf7cf-hidden divClass">2</div>
    <div id="group-807" data-class="wpcf7cf_group" class="wpcf7cf-hidden divClass">3</div>
    <div id="group-808" data-class="wpcf7cf_group" class="wpcf7cf-hidden divClass">4</div>
    <div id="group-809" data-class="wpcf7cf_group" class="wpcf7cf-hidden divClass">5</div>
    <div id="group-810" data-class="wpcf7cf_group" class="wpcf7cf-hidden divClass">6</div>
</div>

jQuery

<script>
$(document).on('click','.divClass',function(){
$(".divClass").each(function(){
    $(this).removeClass("focused");
})
$(this).prev().addClass('focused');
})
</script>

我希望这会对您有所帮助。

Answer 3

这应该可以解决问题。

$('.contact-form-conditional .wpcf7cf-hidden').on('click', function() { $(this).prev().toggleClass('focused') })

它选择上一个元素并切换focused类。

自动添加类别到项目后

3 个答案: