자바 목록을 통해 HTML 목록 (Li)을 변경합니다.

나는 그와 같은 목록을 가지고 있으므로 사용자는 항목을 하나씩 확인하고 항목이 선택되었는지 확인해야합니다. 나는 그래서 그 라인을 "녹색"을 변경해야하는 경우 "리"중 하나가 체크되어 있는지 여부를 자바 스크립트를 통해 확인 할 자바 목록을 통해 HTML 목록 (Li)을 변경합니다.

<html> 
<head> 
    <link href="../../fuctions/style.css" rel="stylesheet" media="screen" type="text/css" /> 
    <script type="text/javascript" charset="utf-8" src="../../fuctions/cordova-2.3.0.js"></script> 
    <script type="text/javascript" charset="utf-8" src="../../fuctions/functions.js"></script> 
</head> 
<body> 
    <div id="topbar"> 
     <div id="title"> 
      Engine Run-up 
     </div> 
     <div id="leftnav"> 
      <a href="../../index_aerosoft.html">Home</a> 
      <a href="katana_checklist_all.html">Overview</a> 
     </div> 
     <div id="rightnav"> 
      <a href="katan_checklist_takeoff.html"id="a_next">Next</a> 
     </div> 
    </div> 
    <div id="content"> 
     <ul class="pageitem"> 
      <li class="radiobutton"> 
       <span class="name">Toe Brakes -<font color="red"> hold</font></span> 
       <input name="1" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Safety Belts -<font color="red"> fastened</font></span> 
       <input name="2" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Canopy -<font color="red"> closed/locked</font></span> 
       <input name="3" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Fuel Pressure Warning Light -<font color="red"> OFF</font></span> 
       <input name="4" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Fuel Shut-off Valve -<font color="red"> check OPEN</font></span> 
       <input name="5" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Fuel Quantity Indicator -<font color="red"> check</font></span> 
       <input name="6" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Engine Gauges -<font color="red"> green range</font></span> 
       <input name="7" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Trim -<font color="red"> NEUTRAL</font></span> 
       <input name="8" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Controls -<font color="red"> free</font></span> 
       <input name="9" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Throttle -<font color="red"> 1700-1800 RPM</font></span> 
       <input name="10" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Prop Control Level -<font color="red"> Cycle 3 x (50-250 RPM)</font></span> 
       <input name="11" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Ignition Switch - Cycle -<font color="red"> L-BOTH-R-BOTH</font></span> 
       <input name="12" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Throttle -<font color="red"> 1500 RPM</font></span> 
       <input name="13" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Carburetor Heat -<font color="red"> ON (<50 RPM)</font></span> 
        <input name="14" type="radio" value="other" /> 
        </li> 
      <li class="radiobutton"> 
       <span class="name">Throttle -<font color="red"> IDLE</font></span> 
       <input name="15" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Carniretor Heat -<font color="red"> OFF</font></span> 
       <input name="16" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Corcuit Breakers -<font color="red"> check IN</font></span> 
       <input name="17" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Electric Fuel Pump -<font color="red"> ON</font></span> 
       <input name="18" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Wing Flaps -<font color="red"> T/O</font></span> 
       <input name="19" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Parking Brake -<font color="red"> release</font></span> 
       <input name="20" type="radio" value="other" /> 
      </li> 
     </ul> 
    </div> 
    <div id="footer"> 
     <a class="noeffect" href="#" onClick="resetChecklist();">Reset ZYX</a> 
     <br /><br /> 
     <a class="noeffect" href="#" onClick="openXYZDE();">XYZ</a> 
    </div> 
</body>

<li class="radiobutton"> 
    <span class="name">Toe Brakes -<font color="green"> hold</font></span> 
    <input name="1" type="radio" value="other" /> 
</li>

출처

2013-01-25 Fabian Boulegue

무엇을 시도 했습니까? 라디오 버튼에 'click'이벤트 핸들러를 추가하는 것은 어떻습니까? – Adrian

jquery가 옵션이면 매우 간단 해집니다.

function checkChanges() 
{ 
    $('.radiobutton font').attr('color', 'red'); 

    $('.radiobutton :checked').closest('.radiobutton').find('font').attr('color', 'green'); 
} 

$(function() 
{ 
    checkChanges(); 
    $('.radiobutton :radio').on('click', checkChanges); 
});

내가보기 엔 폰트 태그를 제거하는 것이 좋습니다 대신, 리튬에 녹색 글꼴 색상을 설정 같은 radiobutton-checked을 클래스를 추가 있지만.

기본 코드는 모든 글꼴을 빨간색으로 재설정 한 다음 선택한 라디오가있는 라디오 버튼 하나를 찾아 부모 라디오 버튼 (closest)까지 반복 한 다음 해당 하위 글꼴 태그를 찾아 색상을 녹색. 그런 다음 라디오 버튼이 클릭 될 때마다 위의 과정을 반복하므로 적극적으로 선택된 라디오 버튼 만 녹색으로 유지합니다.

출처

2013-01-25 14:29:53

jQuery는 Option입니다. 문제는 프레임 워크가 필요로하는 글꼴 태그를 사용해야합니다. 함수를 호출하는 방법은 무엇입니까? –

필요한 모든 것이 제 대답에 포함되어 있습니다. checkChanges는 라디오 버튼이 변경 될 때마다 실행되어야하는 함수입니다. 페이지가로드되면 즉시 checkChanges를 호출하여 사물을 초기화하고 클릭이 발생할 때마다 자동으로 checkChanges를 다시 호출합니다. 모든 것이 있습니다. –

코드에서 문제가 발견되었습니다. .attr ('color', green); .attr ('color', 'green')이어야합니다. –

자바 목록을 통해 HTML 목록 (Li)을 변경합니다.

답변

관련 문제