正確的方法來追加類和AJAX調用

-1

好吧，所以我真的不認爲我正在構造我的JS，並希望有人能指出我在正確的方向。我不認爲爲每個列表項順序命名類是一種有效的或適當的方式來完成這一點。正確的方法來追加類和AJAX調用

我有複選框，點擊後，需要執行兩個動作列表：

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部分還，但我希望知道這個需求，因爲我將很快將這部分添加到代碼中。感謝您提供的任何指導！

來源

2013-01-17 viablepath

爲什麼代碼重複？函數的思想是能夠在不同的上下文中重用相同的函數。 –

另外，jQuery可以輕鬆地動態綁定事件處理程序，因此您不必像'onchange =「...」'這樣的硬編碼東西。 –

這就是我的問題到底 - 我該如何實現？ – viablepath

您也可以在類適用於外層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/

來源

2013-01-17 20:40:09 Shanimal

使用jQuery的addClass

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

更新，使用^=：

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

來源

2013-01-17 20:09:18 bevacqua

這不是問題。我的問題是 - 如何將該類添加到不同的div和複選框，而不必重命名該ID和函數（setCheck1，setCheck2等）。這似乎是一種浪費的方式來處理它。 – viablepath

檢查更新。 – bevacqua

這是我會怎麼做：

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

其中$toolkitlist是包含OL jQuery對象元件。請注意，我如何在LI元素上設置類，因爲這是表示檢查項目的最外層元素。您可以使用這些選擇樣式的「檢查」狀態：

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

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

來源

2013-01-17 20:16:51

你是最初的代碼拋出一個語法錯誤。 'change'後的第1行 – viablepath

@viablepath我的初始代碼在語法上無效。嘗試最新的代碼。 –

只要裏面只有一個輸入，我會聽到一個'輸入'而不是'.inlinecheckers'的性能改變（我知道它通常會產生非常小的影響，但是...影響！）。除此之外，這正是我所要做的。 – griffla

刪除內聯.onchange ..和change事件綁定到.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/

來源

2013-01-17 20:20:48

美麗的代碼伴侶。 – viablepath

正確的方法來追加類和AJAX調用

回答

相關問題