正确添加类的方法AJAX调用

Proper Way to Append Class & AJAX Call

本文关键字：方法 AJAX 调用 添加      更新时间：2023-09-26

好的，所以我真的不认为我正确地构建了我的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>

这是我当前的JS:

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部分，但我想让这个需求为人所知，因为我很快就会将这部分添加到代码中。感谢您提供的任何指导!

我是这样做的:

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

，其中$toolkitlist是包含OL元素的jQuery对象。注意我是如何在LI元素上设置类的，因为LI元素是表示选中项的最外层元素。你可以使用这些选择器来设置"checked"状态的样式:

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

使用jQuery的 addClass 

$('#grayTitle3').addClass('titleGray');

更新，使用 ^= :

$('[id^=grayTitle]').addClass('titleGray');

您也可以将类应用于外部div

CSS: 

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

JS: 

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

jsfiddle: http://jsfiddle.net/y2rHF/3/

删除inline .onchange..并将更改事件绑定到您的类.inlineCheckers - then you can use 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);
}
http://jsfiddle.net/KYzgB/

相关文章：