0

このコードに問題があり、動作していない理由がわかりません。基本的に、チェックボックスをクリックすると、同じリスト内のテキスト フィールドが表示されます。

「非表示/表示」は必要ありません。これにより、配列に追加のフィールドが入力されるため、チェックボックスが選択されている場合は、div に新しい入力を入力することを検討しています。

問題が発生しているアイデアはありますか?

これが私のhtmlです：

<ul>
    <li class="practice"><label><input type="checkbox" value="Practice 1" class="input_control" name="practice_areas[id][name]" /> Practice 1</label> <div class="showOrder"></div></li>
    <li class="practice"><label><input type="checkbox" value="Practice 2" class="input_control" name="practice_areas[id][name]"  /> Practice 2</label> <div class="showOrder"></div></li>
    <li class="practice"><label><input type="checkbox" value="Practice 3" class="input_control" name="practice_areas[id][name]"  /> Practice 3</label> <div class="showOrder"></div></li>
    <li class="practice"><label><input type="checkbox" value="Practice 4" class="input_control" name="practice_areas[id][name]"  /> Practice 4</label> <div class="showOrder"></div></li>
    <li class="practice"><label><input type="checkbox" value="Practice 5" class="input_control" name="practice_areas[id][name]"  /> Practice 5</label> <div class="showOrder"></div></li>                 
</ul>

これが私のJavascriptです：

<script>
jQuery('li.practice').each(function() {
    jQuery(".input_control", this).click(function() {
        jQuery('.showOrder', this).html('<label>Order: <input type="text" size="2" name="practice_area[id][order]" value="" /></label>');
    });
});

</script>
4

2 に答える 2

2

.input_controlを見つけるために as コンテキストを誤って使用していました。 as コンテキスト.showOrderを使用するようにコードを変更しli.practiceたので、次のようにします。

jQuery('li.practice').each(function() {
    var li = this;
    jQuery(".input_control", this).click(function() {
        jQuery('.showOrder', li).html('<label>Order: <input type="text" size="2" name="practice_area[id][order]" value="" /></label>');
    });
});
于 2013-03-28T20:36:07.153 に答える
2

を誤用$(selector, context)して.showOrderいます。要素はクリックされた要素のコンテキスト内にありません。

$('li.practice .input_control').change(function(){
    var $target = $(this).closest('li').find('.showOrder');
    if (this.checked) {
        $target.html('<label>Order: <input type="text" size="2" name="practice_area[id][order]" value="" /></label>');
    } else {
        $target.empty();
    }
});

http://jsfiddle.net/Qh6Fq/1/

于 2013-03-28T20:36:16.910 に答える