2016-12-30 5 views
-1

ich noch jquery Lernen bin und wie sie alle zusammen zu setzen, aber ich habe diesen Code in einer Einkaufsliste einzurichten:Div ändert Hintergrundfarbe, wenn Kontrollkästchen aktiviert ist

<div class="AddCheckedWrapper"> 
    <span>Check to Add to Cart</span> 
    <input name="atcuid" type="checkbox"> 
</div> 

Wie ich diese arbeiten will, ist Verwenden Sie Jquery, haben. AddCheckedWrapper das Kontrollkästchen und klicken Sie erneut auf es abwählen. Wenn das Kontrollkästchen aktiviert ist, ändert sich der Hintergrund von AddDCheckedWrapper zu blau. Und wenn es nicht aktiviert ist, ändert sich der Hintergrund von .AddCheckedWrapper rosa. Das Problem, das ich habe, ist jedoch 1) Ich kann keine Codierung finden, die das div-Kontrollkästchen aktivieren und deaktivieren und es Hintergrundfarben ändern lassen. und 2) Da es eine Liste ist, gibt es mehr als einen .AddCheckedWrapper, also weiß ich, dass $ (this) irgendwie benutzt werden muss. Ich habe auch eine Menge Box, die das Kontrollkästchen aktiviert, wenn Sie ändern, was drin ist. Also, wenn ich die Nummer in der Menge ändern, egal, es wird das Kontrollkästchen aktivieren. Also müssen die Hintergrundfarben basierend auf dem Kontrollkästchen aktiviert sein oder nicht, und da habe ich Probleme.

Antwort

4

Sie haben Recht, dass Sie die this Referenz des Elements verwenden können, das das Ereignis ausgelöst hat, um das DOM zu durchlaufen, und die zugehörige .AddCheckedWrapper finden. In diesem Fall können Sie die Methode closest() verwenden, um das Element zu finden, und dann toggleClass().

Sie können auch das Ereignis 10 für das Kontrollkästchen auslösen, wenn das Mengenfeld in der Zeile geändert wird. Versuchen Sie folgendes:

$('.AddCheckedWrapper :checkbox').change(function() { 
 
    $(this).closest('.AddCheckedWrapper').toggleClass('checked', this.checked); 
 
}); 
 

 
$('.AddCheckedWrapper .qty').change(function() { 
 
    $(this).closest('.AddCheckedWrapper').find(':checkbox').prop('checked', this.value != 0).change(); 
 
});
.AddCheckedWrapper { 
 
    background-color: pink; 
 
} 
 
.AddCheckedWrapper.checked { 
 
    background-color: blue; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="AddCheckedWrapper"> 
 
    <label> 
 
    <span>Check to Add to Cart</span> 
 
    <input name="atcuid" type="checkbox"> 
 
    </label> 
 
    <input name="qty" type="number" class="qty" min="0"> 
 
</div> 
 
<div class="AddCheckedWrapper"> 
 
    <label> 
 
    <span>Check to Add to Cart</span> 
 
    <input name="atcuid" type="checkbox"> 
 
    </label> 
 
    <input name="qty" type="number" class="qty" min="0"> 
 
</div>

+0

Ich denke, die OP 'change' auf Checkbox auslösen muss, wenn die Menge Eingänge zu ändern. –

+1

@xohbrittx Wenn Sie den Trefferbereich des Kontrollkästchens vergrößern möchten, fügen Sie ein Labelelement hinzu. Ich habe auch die Antwort aktualisiert, um Ihnen zu zeigen, wie Sie das Kontrollkästchen aktivieren, wenn eine Menge> 0 eingegeben wird. –

Verwandte Themen