jquery - jQuery的行为不符合我的预期

我正在尝试做一些有关复选框（或单选框）和显示隐藏内容的问题。

HTML

<input type="checkbox" id="carousel" class="carouselGlobal" name="aisis_options[carousel_global]" value="carousel_global">

简单的复选框。现在让我们添加一些jquery以显示隐藏的部分，其div类为.sectionCarousel

jQuery的

    $('.carouselGlobal').click(function(){
        if ($(this).attr("id") == "carousel"){
            $('.sectionCarousel').show();
        } else {
            $('.sectionCarousel').hide();
        }
    });

这很容易，您单击，看到，单击关闭，看不到.....错误

问题

如果我使用上述代码单击复选框以显示其显示的隐藏部分，如果我再次单击该复选框以取消选中该项目，则该项目仍然存在。

因此，现在如果保存表单，我们假设复选框在页面刷新时保持选中状态，那么我们需要保持该部分显示，这样我们可以：

jQuery的

    if ($('input[value=carousel_global]:checkbox:checked').attr('id') === "carousel") {
        $('.sectionCarousel').show();
    }

这样做很简单。

此处再次重复发行一号，如果您单击复选框以取消选中它，该部分仍会显示。但是，如果此时保存表单，该部分将消失，直到再次单击该复选框。

如您所见，这可能会成为一个问题。

所以我问你：

表格保存之前

当我单击复选框时，应该显示隐藏的部分，当我再次单击它以取消选中时，它应该消失。

表单保存后

假设单击页面刷新复选框，则该部分应保持可见，如果我再单击该复选框以取消选中它，则内容（在本例中为该部分）应消失。

单击以显示作品，取消选中它（该部分）消失-不起作用。为什么？

最佳答案

如果必须使用绑定到一组元素的click事件，则还需要检查选中状态，类似于：

$('.carouselGlobal').click(function(){
    var $this = $(this);
    var theId = this.id;

    if (theId === "carousel"){
        if($this.is(":checked")){
            $('.sectionCarousel').show();
        } else {
            $('.sectionCarousel').hide();
        }
    }
});

DEMO-添加状态检查



编辑


  在您输入以下内容后，您的代码段将一直有效，直到我提交表单为止
  复选框仍被单击，但div部分在被隐藏时
  不应该是。


您可以通过如下分离代码来解决此问题：

var setSectionCarouselState = function (showIt) {
    if (showIt) {
        $('.sectionCarousel').show();
    } else {
        $('.sectionCarousel').hide();
    }
}

$('.carouselGlobal').click(function () {
    var $this = $(this);
    var theId = this.id;

    if (theId === "carousel") {
        setSectionCarouselState($this.is(":checked"));
    }
});

setSectionCarouselState($('#carousel').is(":checked"));

DEMO-分隔代码



上面的代码不适用于复制粘贴，因为它可在jsFiddle的隔离环境中工作，但可能需要进行一些细微调整才能使其在您的特定环境中工作。

编辑


  如果我有6或7个，则明显不同的ID和类是
  有一个简单的方法来处理它们，或者我会写一些东西
  与此答案类似，每个答案都一样？


我不确定100％如何设置，但假设您有多个checkboxes
显示/隐藏一对一的其他元素或选择器。您可以编写一个更通用的解决方案。

一种选择是使用data-attribute方法，在该方法中，您应为每个checkbox选择器假定要生效的选择器。这也将使id属性的使用变得多余。

假设您有类似以下内容的HTML：

<input type="checkbox" class="carouselGlobal">
<input type="checkbox" class="carouselGlobal" data-target-selector=".anotherSectionCarousel">
<input type="checkbox" class="carouselGlobal" data-target-selector=".sectionCarousel" checked>

<div class="sectionCarousel" style="display:none;">section carousel</div>
<div class="anotherSectionCarousel" style="display:none;">another section carousel</div>

正如您在上面看到的，每个checkbox都有一个data-target-selector属性，该属性包含要影响的元素的选择器。

您的脚本现在变得很小了：

// method which takes in the DOM reference of a checkbox
// interrogates the data attribute and uses it
// to show/hide the matching element
var setTargetState = function (checkbox) {
    var $this = $(checkbox);
    var $target = $($this.attr('data-target-selector'));

    if(!$target.length){
        return;
    }

    if ($this.is(":checked")) {
        $target.show();
    } else {
        $target.hide();
    }
}

// click event drastically simplified
$('.carouselGlobal').click(function () {
    setTargetState(this);
});

// iterates through all checkboxes ensureing the initial state is applied
$('.carouselGlobal').each(function(){
    setTargetState(this);
});

DEMO-例如使用数据属性