JQuery가 클래스를 추가했지만 여러 td 요소에서 제거하지 않았습니다

-1

사용자 입력 및 요소 클래스를 기반으로 화면에 <td> 필드를 두 개 이상 보이게하거나 보이지 않도록하려고합니다. jquery, html, javascript를 사용하고 있습니다.JQuery가 클래스를 추가했지만 여러 td 요소에서 제거하지 않았습니다

기본적으로 다른 필드가있는 HTML 표가 있습니다. 나는이 필드에 "Visible", "Visible and Required"또는 "Invisible"중 하나의 클래스를 갖기를 원합니다. 사용자가 옵션을 선택하면 이전 요소를 제거하고 새 요소를 추가하여 해당 요소의 클래스를 변경합니다. 이 필드의 기본값은 보이지 않아야합니다.

HTML :

<body onload="ShowTheScreen()"> 

<table border="1"> 
<tr> 
    <td class="ReasonCode" align="center"> 
    <span class="FieldLabel">Reason Code</span> 
    </td> 
    <td class="CostCenter" align="center"> 
    <span class="FieldLabel">Cost Center</span> 
    </td> 
</tr> 
<tr> 
    <td class="ReasonCode" align="center"> 
    <input type="text" id="ReasonCode" name="ReasonCode" value="1243"> 
    </td> 
    <td class="CostCenter" align="center"> 
    <input type="text" id="CostCenter" name="CostCenter" value="00123"> 
    </td> 
</tr> 
</table> 

<input type="button" value="MakeVis" onclick="PopulateTable()"> 

</body>

자바 스크립트 :

function ShowTheScreen(){ 
    ToggleFieldVisibility(".ReasonCode", 3); 
    ToggleFieldVisibility(".CostCenter", 3); 
    DisplayFields(); 
} 

function PopulateTable(){ 
    ToggleFieldVisibility(".ReasonCode", 2); 
    ToggleFieldVisibility(".CostCenter", 1); 
    DisplayFields(); 
} 

function ToggleFieldVisibility(element, x){ 
switch(x){ 
    case 1: 
    $(element).removeClass("Invisible Required").addClass("Visible"); 
    break; 
    case 2: 
    $(element).removeClass("Invisible").addClass("Visible Required"); 
    break; 
    case 3: 
    $(element).removeClass("Visible Required").addClass("Invisible"); 
    break; 
    default: 
    $(element).removeClass("Visible Required").addClass("Invisible"); 
    break; 
} 
DisplayFields(); 
} 

function DisplayFields(){ 
$(".Invisible").css({"visibility":"hidden"}); 
$(".Visible").css({"visibility":"visible"}); 
}

난 데 문제는이입니다 : 내가 페이지를 열 때, 필드는 "보이지 않는"수 클래스가 추가되어야하며 숨겨집니다. 그러나 나중에 보이지 않는 클래스를 제거하고 표시 클래스를 추가하면 보이지 않는 클래스가 절대 제거되지 않고 표시되는 클래스가 추가되지 않습니다. 요소는 처음에는 클래스를 그대로 유지하므로 숨겨집니다.

jquery add/removeClass의 문제와 관련된 이전 스레드를 보았지만 나에게 도움이되지는 못했습니다. 더 많은 정보가 필요하면 알려주세요.

업데이트 1 : 모든 답장을 보내 주셔서 감사합니다. 불행히도, 나는 이것이 일어날 것이라고 생각했다, 내가 여기에 게시 한 코드는 내가 실제로 가지고있는 코드의 훨씬 단순화 된 버전이며, 내가받은 답의 대부분은 인용문과 관련된 문제처럼 게시 된 문법과 관련이있는 것으로 보인다. . 내가 실제로하고있는 것을 더 잘 반영하도록 코드를 업데이트했습니다. 잘하면이 문제가 무엇인지 좁힐 수 있습니다.

업데이트 2 : 내가 뭘 잘못하고 있었는지 압니다. 내 코드에서 나는 ToggleFieldVisibility ("ReasonCode", 2)를 호출하고 있는데 여기서는 잘 작동한다. 그러나 실제 코드에서는 외부 응용 프로그램을 사용하여 SQL 호출에서 숫자 2를 검색하고 문자열로 반환했습니다. "2"는 스위치에서 2 (또는 "1"에서 "3"에서 3)와 비교되며 항상 기본값으로 변경되므로이 필드가 항상 보이지 않는 이유입니다. 하!

출처

2012-06-06 LCIII

'의 onclick = "ToggleFieldVisibility (". ReasonCode ", 1) > 'onclick = "ToggleFieldVisibility ('ReasonCode ', 1)"> 왜 클래스별로 요소의 가시성을 수동으로 설정합니까? CSS 클래스를 사용하지 않는 이유는 무엇입니까? – Thomas

Chrome에서 작동합니다. –

내가 생각하는 문제가 인라인 onClick 핸들러에있다. 현재 가지고 있기 때문에, 속성 구분자와 문자열을 인용 부호로 사용하고 있습니다. 이 경우 속성이 잘려져 ToggleFieldVisibility("으로 표시되고 함수가 실행되지 않습니다.

보십시오 : 당신이 어떤 이유로 "의를 사용해야하는 경우

<input type="button" value="MakeVis" onclick="ToggleFieldVisibility('.ReasonCode', 1)"> 
<input type="button" value="MakeVisReq" onclick="ToggleFieldVisibility('.ReasonCode', 2)"> 
<input type="button" value="MakeInVis" onclick="ToggleFieldVisibility('.ReasonCode', 3)">

, 당신은 항상 \로 탈출 할 수 (\".ReasonCode\"...

출처

2012-06-06 13:40:02 ajm

그것이 전체 이슈인지는 확실하지 않았습니다. –

마지막으로 DisplayFields() 함수를 호출 할 때 빠른 추측으로 css를 인라인 스타일 태그 형태로 요소에 추가합니다. removeClass()

코드를 수행 한 후 .removeAttr("style") 권리를 실행 해보십시오 :

JQuery와 :

이


function ToggleFieldVisibility(element, x){ 
      //alert("Hello"); 
      switch(x){ 
       case 1: 
        $(element).removeClass("Invisible Required").removeAttr("style").addClass("Visible"); 
        break; 
       case 2: 
        $(element).removeClass("Invisible").removeAttr("style").addClass("Visible Required"); 
        break; 
       case 3: 
        $(element).removeClass("Visible Required").removeAttr("style").addClass("Invisible"); 
        break; 
       default: 
        $(element).removeClass("Visible Required").removeAttr("style").addClass("Invisible"); 
        break; 
       } 
      DisplayFields(); 
     } 

     function DisplayFields(){ 
      $(".Invisible").css({"visibility":"hidden"}); 
      $(".Visible").css({"visibility":"visible"}); 
     }

HTML이 :


<body onload="ToggleFieldVisibility('.ReasonCode .CostCenter', 3)"> 
<table border="1"> 
<tr> 
    <td class="ReasonCode" align="center"> 
    <span class="FieldLabel">Reason Code</span> 
    </td> 
    <td class="CostCenter" align="center"> 
    <span class="FieldLabel">Cost Center</span> 
    </td> 
</tr> 
<tr> 
    <td class="ReasonCode" align="center"> 
    <input type="text" id="ReasonCode" name="ReasonCode" value="1243"> 
    </td> 
    <td class="CostCenter" align="center"> 
    <input type="text" id="CostCenter" name="CostCenter" value="00123"> 
    </td> 
</tr> 
</table> 

<input type="button" value="MakeVis" onclick="ToggleFieldVisibility('.ReasonCode', 1)" /> 
<input type="button" value="MakeVisReq" onclick="ToggleFieldVisibility('.ReasonCode', 2)" /> 
<input type="button" value="MakeInVis" onclick="ToggleFieldVisibility('.ReasonCode', 3)" /> 

</body>

출처

2012-06-06 13:34:42

답장을 보내 주셔서 감사합니다 :)! 불행히도, 그것은 "보이지 않는"클래스를 제거하지 못했습니다. ose 필드. 경고 (요소 id prevclass newclass);() 호출의 앞에 ToggleFieldVisibility() 문을 사용하고 스타일을 제거 할 때 화면에 다시 추가되는 필드를 볼 수 있었지만 DisplayFields()가 호출 되었기 때문에 다시 사라집니다. "보이지 않는"클래스. – LCIII

@LCIII 내가 게시 한 코드를 시도해보십시오. 올바르게 작동합니다. –

JQuery가 클래스를 추가했지만 여러 td 요소에서 제거하지 않았습니다

답변

관련 문제