Question

我在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;
}

Answer 1

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

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

演示：Fiddle

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

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

演示：Fiddle

Answer 2

<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，然后获取返回数组中的第一项然后将类添加到该。

Answer 3

我认为这更正确

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

Answer 4

当我在检查员模式中查看您的页面时，我立即看到错误：

未捕获的TypeError：无法设置属性＆＃39; onclick＆＃39;为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>

我希望这适合你！

Jquery - 不能改变div的类

4 个答案:

为什么？

解决方案