0
jQuery ile garip bir hata yaşıyorum.jQuery seçici ile garip bir sorun
HTML'mde checkbx kimliğiyle bir giriş var ve javascriptimde checkbox kimliğine sahip bir şeyi hedefleyen bir seçicim var.
Şimdi, tüm bu çalışmalar, jQuery'nin bir nonexistant id seçtiği gerçeğine rağmen.
Bu hatayı düzeltmeyi denediğimde sorun, ya seçiciyi checkbx ya da kimliği checkbox olarak değiştirdiğimde, bunu yaptığımda, onay kutusundaki ilk tıklamayı kaydettirmeme olur. kelimeler.
Sorum şu, neden bu oluyor ve nasıl düzeltirim?
Bu benim kodum.
function checkbox() {
var $y = $("#yon");
var $n = $("#non");
var $cx = $("#chex")
var $cbx = $("#checkbox");
var chval = false;
$(".cspan").click(function() {
\t $n.toggleClass("no");
\t $y.toggleClass("yes");
\t if (chval) {
\t \t $cx.text("\u2716");
\t \t $cbx.prop('checked', false);
\t \t chval = false;
\t }
\t else {
\t \t $cx.text("\u2714");
\t \t $cbx.prop('checked', true);
\t \t chval = true;
\t }
});
}
$(function() {
checkbox();
});.checkbx{
display:none;
}
.checkbx + label span {
display:inline-block;
width: 170px;
\t height: 60px;
\t border-radius: 25px;
margin:-1px 4px 0 0;
vertical-align:middle;
\t position:absolute;
\t background-color: #ff3a31;
\t transition: background-color 100ms linear;
\t cursor:pointer;
}
.checkbx:checked + label span {
background-color: #00cc66;
transition: background-color 100ms linear;
}
.checkemb{
\t position:relative;
\t display:inline-block;
\t margin-right:10px;
\t margin-left:10px;
\t font-family:"Arial Black", Gadget, sans-serif;
\t color:#ffffff;
\t cursor:pointer;
\t background-color: rgba(0, 0, 0, 0);
}
p.xy{
\t margin-right:25px;
\t margin-left:25px;
}
p.yes{
\t color:#990800;
\t transition: color 100ms linear;
}
p.no{
\t color:#008040;
\t transition: color 100ms linear;
}<!DOCTYPE html>
<html>
\t <head>
\t \t <meta charset="UTF-8">
\t \t <link rel="stylesheet" type="text/css" href="Checkbox test-css.css"/>
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
\t \t <script src="Checkbox test-js.js"></script>
\t </head>
\t <body>
\t \t <div id="checkcon">
\t \t \t <input id="checkbx" class="checkbx" type="checkbox"/>
\t \t \t <label for="checkbx">
\t \t \t \t <span class="cspan">
\t \t \t \t \t <p class="checkemb yes" id="yon">Yes</p>
\t \t \t \t \t <p class="checkemb xy" id="chex"><strong>✖</strong></p>
\t \t \t \t \t <p class="checkemb" id="non">No</p> \t \t
\t \t \t \t </span>
\t \t \t </label>
\t \t </div>
\t </body>
</html>
Öğenizin HTML'deki kimliği "checkbx". Bir "o" eksiksin. – krillgar
Bunu biliyorum, sorunu düzeltmek de budur. –
"" onay kutusunda hedeflenmiş olan "