Question

编辑我无权访问原始HTML。我只能将jQuery添加到页面中。

我试图根据是否存在另一个元素（div）来动态地显示/隐藏页面上的元素（div）。我在页面上有一个复选框，单击该复选框即可添加一个类。

这里的代码就是我想要的。但是，当.is-checked存在时，它只是隐藏该元素。它不会再次切换回去。

$( document ).ready(function() {
if($('.is-checked').length){
   $('.fn_container_start').hide();
}
});

我已经有一个复选框，其中包含一个名为.selectit的类，当您单击它时，将附加一个名为.is-checked的类

我希望将.is-checked附加到页面上以隐藏类.fn_container_start

但是当页面上没有.is-checked时，也应该再次隐藏.fn_container_start类。

这是单击前后的复选框的html

在单击复选框之前

<label class="selectit"><input value="157" type="checkbox" name="download_category[]" id="in-download_category-157"> Brushes</label>

之后

<label class="selectit is-checked"><input value="157" type="checkbox" name="download_category[]" id="in-download_category-157"> Brushes</label>

这可能吗？

谢谢

莫顿

Answer 1

function valueChanged(){
    if($('.toggle_check').is(":checked"))   {
        $('.fn_container_start').hide();
        $('.toggle_check').addClass('is-checked');
        }
    else{
        $('.fn_container_start').show();
        $('.toggle_check').removeClass('is-checked');
        }

}

<label class="selectit"><input value="157" type="checkbox" class="toggle_check" name="download_category" id="in-download_category-157" onchange="valueChanged();"> Brushes</label>
<div class="fn_container_start">
  <p class="hide">div hides if the checkbox checked</p>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

Answer 2

我认为您可以使用.hasClass方法

$( document ).ready(function() {
 $("#in-download_category-157").click(function() {
    $(".selectit").toggleClass("is-checked");
        if($('.selectit').hasClass('is-checked')){
            $('.fn_container_start').hide();
        }else{
            $('.fn_container_start').show();
        }
  });
});

Answer 3

使用此代码

 <script type="text/javascript">
        $(document).ready(function() {

        $('input[type="checkbox"]').click(function() {

             $(".selectit").addClass("is-checked");

      });

    });
    </script>

Answer 4

$( document ).ready(function() {
    $('.selectit').on('click', function(){
        $('.fn_container_start').toggleClass("hidden");
    });
});

.hidden{display:none !important;}
.fn_container_start{border:1px dashed red;}

<label class="selectit"><input value="157" type="checkbox" name="download_category[]" id="in-download_category-157"> Brushes</label>

<div class="fn_container_start">This div have .fn_container_start class</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Answer 5

$('.selectit input.toggle_check').on('change',function(){
    if($(this).is(":checked"))   {
        $('.fn_container_start').hide();
        $(this).addClass('is-checked');
        }
    else{
        $('.fn_container_start').show();
        $(this).removeClass('is-checked');
        }

})

<label class="selectit"><input value="157" type="checkbox" class="toggle_check" name="download_category" id="in-download_category-157"> Brushes</label>
<div class="fn_container_start">
  <p class="hide">div hides if the checkbox checked</p>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

jQuery切换元素（如果存在其他元素）

5 个答案: