Удаление класса из элемента с помощью jquery

Question

Я думаю, что я ОЧЕНЬ близко - но не совсем там ... Вкратце: я пытаюсь показать нижнюю часть таблицы (шаг2) в зависимости от наличия данных в поле ввода в верхней части таблицы (этап 1). Я пытаюсь использовать removeClass через jQuery для начальной загрузки документа AND при изменении.

ОБРАТИТЕ ВНИМАНИЕ: УПОМЯНУТОЕ ВОТ НЕСКОЛЬКО СЦЕНАРИИ - НЕ КАК ИНДИКАЦИИ неопытности, НО чтобы показать, что я работаю трудноразрешимой ЭТО И ЭТО МОИ НЕСКОЛЬКО ПЫТАЕТСЯ ...

http://jsfiddle.net/SUrU9/2/

<table> 
<tr align="center"> 
    <td colspan="2"> 
     <hr> 
    </td> 
</tr> 
<tr id="Step1ID"> 
    <td valign="middle">Step 1 Data:</td> 
    <td valign="middle"> 
     <input type="text" id="Step1Data" name="Step1Data" size="8" maxlength="8" /> 
    </td> 
</tr> 
<tr align="center"> 
    <td colspan="2"> 
     <hr> 
    </td> 
</tr> 
<tr id="Step2ID" class="hideS2"> 
    <td>Step2 Data:</td> 
    <td> 
     <input type="text" id="Step2Data" name="Step2Data" size="8" maxlength="8" /> 
    </td> 
</tr> 
<tr align="center"> 
    <td colspan="2"> 
     <hr> 
    </td> 
</tr> 
</table> 


$(document).ready(function() { 
var Step1Data = $("#Step1Data").val(); 
if (Step1Data === '') {} else { 
    $('tr').removeClass('hideS2'); 
} 

$(document).on('change', '#Step1ID', function() { 
    var Step1Data = $.trim(("#Step1Data").val()); 
    if (Step1Data === '') {} else { 
     $('tr').removeClass('hideS2'); 
    } 
}); 

$(body).on('change', '#Step1ID', function() { 
    var Step1Data = $.trim(("#Step1Data").val()); 
    if (Step1Data === '') {} else { 
     $('tr').removeClass('hideS2'); 
    } 
}); 

$('#Step1ID').on('change', '#Step1Data', function() { 
    var Step1Data = $.trim(("#Step1Data").val()); 
    if (Step1Data === '') {} else { 
     $('tr').removeClass('hideS2'); 
    } 
}); 

$("Step1Data").blur(function() { 
    var Step1Data = $.trim(("#Step1Data").val()); 
    if (Step1Data === '') {} else { 
     $('tr').removeClass('hideS2'); 
    } 
}); 

$("Step1ID").focusout(function() { 
    var Step1Data = $.trim(("#Step1Data").val()); 
    if (Step1Data === '') {} else { 
     $('tr').removeClass('hideS2'); 
    } 
}); 
}); 


.hideS2 { 
display: none; 
} 

Answer 1

Итак, вы хотите, чтобы проверить, если переменные Step1Info и Step2Info содержат какие-либо данные, и если они раскрывают следующую часть Таблица? Причина, по которой он не работает, заключается в том, что инструкции if выполняются, когда документ готов. Как только пользователь на самом деле заполняет части формы, которые вы хотите проверить на данные, jQuery никогда не советует снова проверять. То, что я сделал бы, это удалить скрытый класс, когда пользователь изменит фокус на предыдущем шаге или заставит их сделать что-то, что вызывает событие для удаления класса. Вот код:

<table> 
<tbody> 
    <tr><td>Top Instruction</td></tr> 
    <tr><td>Step1Info</td></tr> 
    <tr id="Step2_id" class="hide"><td>Step2Info</td></tr> 
    <tr id="Step3_id" class="hide"><td>Step3Info</td></tr> 
    <tr><td>Bottom Instruction</td></tr> 
</tbody> 
</table> 

<script language="JavaScript" type="text/JavaScript"> 
$(document).ready(function(){ 
    $(document).on('focus', '#textbox1', function() { 
     $("#Step2_id").removeClass("hide"); 
    }); 

    $(document).on('focus', '#textbox2', function() { 
     $("#Step3_id").removeClass("hide"); 
    }); 
}); 
</script> 

<style> 
.hide { 
    display:none; 
} 
</style> 

Если вы хотите ждать, пока пользователь на самом деле не ставит что-то в форме вы можете использовать:

$(document).on('change', '#textbox1', function() { 
    $("#Step2_id").removeClass("hide"); 
}); 

я должен был принять некоторые вольности и угадать, как вы на самом деле были вещи настроить. Надеюсь, это по крайней мере поможет вам понять, почему все не работает.

Answer 2

Ваш HTML-код имеет тег trbody, что не является действительным. избавиться от этих тегов и переместить id и class в теги <tr>.

также изменить код:

$("tbody").removeClass('hideS2'); 

к

$(".hideS2").removeClass('hideS2'); 

Answer 3

Поскольку я не уверен, как вы получаете переменные, я просто догадался. Я добавил некоторые контрольные метки в инструкции, чтобы показать, что этот шаг был завершен. Вот скрипку к моему примеру:

http://jsfiddle.net/BBaaA/

JQuery:

$(document).ready(function() { 
    $("#Step1_ck").click(function() { 
     $("#Step2_id").toggleClass("hideS2"); 
    }); 

    $("#Step2_ck").click(function() { 
     $("#Step3_id").toggleClass("hideS3"); 
    }); 
}); 

CSS:

.hideS2 { 
    display: none; 
} 
.hideS3 { 
    display: none; 
} 

HTML:

<table> 
    <tr> 
     <td>Top Instruction</td> 
     <td></td> 
    </tr> 
    <tr id="Step1_id" class="hideS1"> 
     <td>Step1Info</td> 
     <td> 
      <input id="Step1_ck" type="checkbox"> 
      <td> 
    </tr> 
    <tr id="Step2_id" class="hideS2"> 
     <td>Step2Info</td> 
     <td> 
      <input id="Step2_ck" type="checkbox"> 
      <td> 
    </tr> 
    <tr id="Step3_id" class="hideS3"> 
     <td>Step3Info</td> 
     <td> 
      <input id="Step3_ck" type="checkbox"> 
      <td> 
    </tr> 
    <tr> 
     <td>Bottom Instruction</td> 
     <td></td> 
    </tr> 
</table>