3

在复选框（或单选框）和显示隐藏内容方面，我尝试做的事情似乎存在问题。

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

它的作用非常简单。

第一个问题在这里再次重复，如果您单击复选框取消选中它，该部分仍然显示。但是，如果您此时保存表单，则该部分会消失，直到您再次单击该复选框。

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

所以我问你：

表格保存前

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

表格保存后

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

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

4

3 回答 3

2

如果您必须使用绑定到一组元素的点击事件，您还需要检查选中状态，类似于以下内容：

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

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

演示- 添加状态检查

编辑

在我提交表单之前，您的代码一直有效，之后仍然单击复选框，但部分 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"));

演示- 分离代码

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

编辑

如果我有 6 或 7 个这些，明显不同的 id 和类是否有一种简单的方法来处理它们，或者我会为每一个写出类似于这个答案的东西？

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

一种选择是使用一种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 - 例如使用数据属性

于 2013-04-07T23:00:58.280 回答
1

jsFiddle 演示

考虑使用切换，并使用id来定位复选框，如下所示：

$("#carousel").click(function(){$('.sectionCarousel').toggle();});
于 2013-04-07T22:40:19.747 回答
0

试试这个：

$('#carousel').click(function(){
    if( $(this).is(':checked') ){
        $('.sectionCarousel').show();
    }else{
        $('.sectionCarousel').hide();
    }
});

你会希望在你的$(document).ready()函数中有这个：

if($('#carousel').is(':checked')){
    $('sectionCarousel').show();
else{
    $('sectionCarousel').hide();
}
于 2013-04-07T23:02:42.047 回答