javascript - 如果其他元素存在，则 jQuery 切换元素

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>