Javascript 附加类的正确方法&；AJAX调用

好吧，我真的不认为我的JS结构正确，我希望有人能给我指出正确的方向。我不认为为每个列表项顺序命名类是实现这一点的有效或正确的方法

我有一个复选框列表，单击时需要执行两个操作：

1） 切换位于其正下方的div的类名

2） 通过AJAX发布状态

这是我当前的标记：

<ol class="toolkitList">
<li>
            <label><input class="inlineCheckers" type="checkbox" id="checkers" onchange="setCheck();" /><b id="grayTitle">List Title 1</b></label>
                <i id="hiddenDiv">Div content can go here.</i>
        </li>

        <li>
            <label><input class="inlineCheckers" type="checkbox" id="checkers2" onchange="setCheck2();" /><b id="grayTitle2">List title 2</b></label>
                <i id="hiddenDiv2">Div content can go here.</i>
        </li>

        <li>
            <label><input class="inlineCheckers" type="checkbox" id="checkers3" onchange="setCheck3();" /><b id="grayTitle3">List title 3</b></label>
                <i id="hiddenDiv3">Div content can go here.</i>
        </li>

        <li>
            <label><input class="inlineCheckers" type="checkbox" id="checkers4" onchange="setCheck4();" /><b id="grayTitle4">List Title 4</b></label>
                <i id="hiddenDiv4">Div content can go here.</i>
        </li>
    </ol>

function setCheck() {
var el = document.getElementById("checkers");

if (el.checked) {
    document.getElementById("hiddenDiv").className = "main";
    document.getElementById("grayTitle").className = "titleGray";
 } else {
    document.getElementById("hiddenDiv").className = "";
    document.getElementById("grayTitle").className = "";
 }
}

function setCheck2() {
var el2 = document.getElementById("checkers2");

if (el2.checked) {
    document.getElementById("hiddenDiv2").className = "main";
    document.getElementById("grayTitle2").className = "titleGray";
 } else {
    document.getElementById("hiddenDiv2").className = "";
    document.getElementById("grayTitle2").className = "";
 }
}

function setCheck3() {
var el3 = document.getElementById("checkers3");

if (el3.checked) {
    document.getElementById("hiddenDiv3").className = "main";
    document.getElementById("grayTitle3").className = "titleGray";
 } else {
    document.getElementById("hiddenDiv3").className = "";
    document.getElementById("grayTitle3").className = "";
 }
}

function setCheck4() {
var el4 = document.getElementById("checkers4");

if (el4.checked) {
    document.getElementById("hiddenDiv4").className = "main";
    document.getElementById("grayTitle4").className = "titleGray";
 } else {
    document.getElementById("hiddenDiv4").className = "";
    document.getElementById("grayTitle4").className = "";
 }
}

我意识到我还没有这个设置中的AJAX部分，但是我想让大家知道这个需求，因为我很快就会将这个部分添加到代码中。感谢您提供的任何指导

使用jQuery的

更新，使用：

---

我会这样做：

$toolkitlist.on( 'change', '.inlineCheckers', function () {
    $( this ).closest( 'li' ).toggleClass( 'checked', this.checked );
});

其中，

$toolkitlist

是包含OL元素的jQuery对象。注意我是如何在LI元素上设置类的，因为它是表示选中项的最外层元素。您可以使用这些选择器设置“选中”状态的样式：

---

删除内联.onchange。。并将更改事件绑定到类

.inlineCheckers-然后您可以使用

this`这样就不必为每个集合创建多个函数

$('.inlineCheckers').on('change', function {
  $el = $(this);
  var $hd = $el.closest('label').next('i'); 
  var $gt = $el.next('b');
  $hd.toggleClass('main', $el[0].checked);
  $gt.toggleClass('checkers', $el[0].checked);
}

---

您还可以将该类应用于外部div

CSS:

JS:

---

jsfiddle:

为什么代码会重复？函数的思想是能够为不同的上下文重用相同的函数。jQuery也很容易动态绑定事件处理程序，这样就不必硬编码诸如“代码> OnChchange =“…”/代码>之类的东西。这就是我的问题——我该如何实现？BTW，考虑避免诸如“Gray”和“DIV”这样的词。用你的班名。您可能希望随后更改颜色或元素类型。这不是问题所在。我的问题是-如何将类添加到不同的div和checkbox，而不必重命名ID和函数（setCheck1、setCheck2等）。这似乎是一种浪费的处理方法。您的初始代码会抛出语法错误。“change”@viablepath后的第1行我的初始代码在语法上无效。尝试最新的代码。只要li中只有一个输入，出于性能原因，我会听“input”而不是“.inlineCheckers”的更改（我知道这通常会产生非常小的影响，但是……影响！；）。除此之外，这正是我要做的。我喜欢你的代码Sime版本-它很清楚，而且切中要害，但是我在$toolkitlist上得到了一个未定义的错误？我是新手，所以如果这是我应该注意的基本问题，我向你道歉……谢谢你的帮助@viablepath为了使我的代码正常工作，您必须手动设置

$toolkitlist

变量。最简单的方法是

var$toolkitlist=$（'.toolkitlist'）。您可以直接在（'change'，…

上写入

$（'.toolkitlist'）。但是我更喜欢在page init上单独执行DOM查询（通常是DOM ready事件），这样我就可以在变量中缓存所有相关静态元素的引用。
$toolkitlist.on( 'change', '.inlineCheckers', function () {
    $( this ).closest( 'li' ).toggleClass( 'checked', this.checked );
});

/* how they look like initially */
.grayTitle { ... }
.hiddenDiv { ... }

/* how they look like when their check-box is checked */
li.checked .grayTitle { ... }
li.checked .hiddenDiv { ... }

$('.inlineCheckers').on('change', function {
  $el = $(this);
  var $hd = $el.closest('label').next('i'); 
  var $gt = $el.next('b');
  $hd.toggleClass('main', $el[0].checked);
  $gt.toggleClass('checkers', $el[0].checked);
}

.selected label b {
    color:blue
}
.selected i {
    color:red
}

$(".inlineCheckers").on('click',function(){
    $(this).parents("li").toggleClass('selected',$(this).is(":checked"));
})