-1

わかりましたので、JSを適切に構築しているとは本当に思いません。誰かが私を正しい方向に向けてくれることを望んでいます。各リスト項目のクラスに順番に名前を付けることは、これを達成するための効果的または適切な方法ではないと思います。

クリックすると2つのアクションを実行する必要があるチェックボックスのリストがあります。

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 部分がまだないことはわかっていますが、その部分をまもなくコードに追加するので、その要件を知らせたいと思いました。あなたが提供できるガイダンスをありがとう！

4

4 に答える 4

3

これは私がそれを行う方法です：

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

ここ$toolkitlistで、OL 要素を含む jQuery オブジェクトです。LI 要素にクラスを設定する方法に注目してください。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-17T20:16:51.167 に答える
2

jQuery を使用するaddClass

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

次を使用して更新します^=。

$('[id^=grayTitle]').addClass('titleGray');
于 2013-01-17T20:09:18.930 に答える
1

クラスを外部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-17T20:40:09.460 に答える
1

インライン .onchange.. を削除し、change イベントをクラス.inlineCheckers - then you can usethis` にバインドして、セットごとに複数の関数を作成する必要がないようにします

$('.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-17T20:20:48.033 に答える