0

我在 StackOverflow 上尝试了很多不同的解决方案，但没有一个对我有用。

当分配给它的复选框被选中时，我必须将一个类添加到一个特定的 div，但我不知道什么对我不起作用！

这是代码，希望你能帮助我！

HTML

<body>
    <div class="riquadro_introduzione">
        <p class="title">Selezione opere</p>
        <p>Ora inizia a creare il tuo itinerario!</br>Queste sono le opere che il museo ti consiglia.</p>
        <p>&nbsp;</p>
        <p>Seleziona l'opera tramite l'apposita checkbox accanto al nome dell'opera stessa.</br></br>
            Premi il pulsante AVANTI quando hai concluso le tue scelte!</p>
    </div>
    <div class="riquadro_content">
        <div style="padding-top:20px;padding-left:11px;">
            <div class="icona_galleria num1" id="divOpera1">
                <p class="label-galleria">Opera 1</p>
                <div class="squaredThree">
                    <input type="checkbox" id="chkOpera1"/>
                    <label for="chkOpera1"></label>
                </div>
            </div>
            <div class="icona_galleria num2">
                <p class="label-galleria">Opera 2</p>
                <div class="squaredThree">
                    <input type="checkbox" id="chkOpera2"/>
                    <label for="chkOpera2"></label>
                </div>
            </div>
            <div class="icona_galleria num3">
                <p class="label-galleria">Opera 3</p>
                <div class="squaredThree">
                    <input type="checkbox" id="chkOpera3"/>
                    <label for="chkOpera3"></label>
                </div>
            </div>
            <div class="icona_galleria num4">
                <p class="label-galleria">Opera 4</p>
                <div class="squaredThree">
                    <input type="checkbox" id="chkOpera4"/>
                    <label for="chkOpera4"></label>
                </div>
            </div>
            <div class="icona_galleria num5">
                <p class="label-galleria">Opera 5</p>
                <div class="squaredThree">
                    <input type="checkbox" id="chkOpera5"/>
                    <label for="chkOpera5"></label>
                </div>
            </div>
            <div class="icona_galleria num6">
                <p class="label-galleria">Opera 6</p>
                <div class="squaredThree">
                    <input type="checkbox" id="chkOpera6"/>
                    <label for="chkOpera6"></label>
                </div>
            </div>
            <div class="pulsante">
                   <a href="javascript:void(0);" style="left:40%;">Avanti</a>
            </div>
        </div>
    </div>
</body>

jQuery

<script> 
    $(document).ready(function() {
        $('#chkOpera1').change(function(){
            if($(this).is(":checked")) {
                $('#divOpera1').addClass("opera_selezionata");
            }
        });
    });
</script>

编辑：

复选框的CSS：

.squaredThree {
width: 20px;    
position: relative;
left:140px;
top: -36px;
}

.squaredThree label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
top: 0;
left:-2px;
border-radius: 4px;

-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);

background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

.squaredThree label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;

-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.squaredThree label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}

.squaredThree input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
4

4 回答 4

2

我看到的唯一问题是，如果未选中复选框，则不会删除该类

$(document).ready(function () {
    $('#chkOpera1').change(function () {
        $('#divOpera1').toggleClass("opera_selezionata");
    })
});

演示：小提琴

由于您有多个复选框，并且如果您想将相同的逻辑应用于其他复选框，那么

$(document).ready(function () {
    $('.icona_galleria input[type="checkbox"]').change(function () {
        $(this).closest('.icona_galleria').toggleClass("opera_selezionata");
    })
});

演示：小提琴

于 2013-11-11T10:12:45.710 回答
0 
<script> 
$(document).ready(function() {
$('#chkOpera1').change(function(){
if($(this).is(":checked"))
    $(this).parents(".icona_galleria")[0].addClass("opera_selezionata");  
})
});
</script>

$(this).parents(".icona_galleria")[0] 正在获取复选框的所有父项，并找到具有 icona_galleria 类的父项，即容器 div，然后获取返回数组中的第一项，然后添加上课。

于 2013-11-11T10:14:10.850 回答
0

我认为这更正确

$(document).ready(function () {
    $('#chkOpera1').change(function () {
        $('#divOpera1').toggleClass("opera_selezionata", this.checked);
    })
});
于 2013-11-11T10:15:15.237 回答
0

当我在检查器模式下查看您的页面时，我立即看到一个错误：

未捕获的类型错误：无法将属性“onclick”设置为 null

现在您的代码没有任何问题，但仍然无法在 DOM 中找到您的元素。

为什么？

这是因为您的代码甚至在加载之前尝试找到该元素。

解决方案

让您的代码在页面加载后执行。您已经将代码包装在document.ready(function { }). 为确保在启动 javascript/jQuery 代码之前加载所有内容，您应该将脚本放在<body>元素的底部：

<body>

<!-- Any Html code -->

<script> 
    $(document).ready(function() {
        $('#chkOpera1').change(function(){
            if($(this).is(":checked")) {
                $('#divOpera1').addClass("opera_selezionata");
            }
        });
    });
</script>
</body>

我希望这对你有用！

于 2013-11-11T10:57:13.523 回答