jQuery를 사용하여 포커스 된 요소와 관련하여 숨겨진 요소 찾기

Question

Ajax 호출에 사용되는 PHP 페이지가 있습니다. <ul> 및 <li> 항목의 출력을 생성합니다. 이 항목은 원본 페이지의 입력 필드에 대한 자동 완성으로 사용됩니다. 내가 아는 문제는 다른 필드를 업데이트하는 우아한 방법을 찾는 것입니다. 사용자가이 필드를 복제 한 후이 Ajax 호출과 후속 SQL 쿼리의 결과에 따라 일부 필드가 숨겨집니다. 가능한 jQuery를 사용하는 것이 바람직합니다. 난 그냥 쉬운 해결책을 찾을 수 없습니다. 모든 next(). next(). next() 현재 사용 중입니다. 추한!

먼저 PHP 페이지 :

<?PHP 
include "dbconnect.php"; 

$partialSection=$_POST['partialSection']; 
$school_id=$_POST['school_id']; 


$sql="select course_section_code,course_name,course_credit_hours,school_id,ext_course_id from ext_courses 
where course_section_code like '%$partialSection%' and school_id = $school_id"; 
$result = db_query($sql); 
    if (mysql_num_rows($result)==0){ 
     echo "<DIV>No external courses match your query for $partialSection at $school_id. Would you like to enter a new course? <button onclick='new_section()'>Yes</button></DIV>"; 
    } 
    $output="<ul>"; 
    while ($record = get_record($result)) 
     { 
      $section=$record['course_section_code']; 
      $course_title=$record['course_name']; 
      $credits=$record['course_credit_hours']; 
      $school_id=$record['school_id']; 
      $ext_course_id=$record['ext_course_id']; 
      $output.="<li class=resultcss onmouseover='this.style.color=\"63b8ee\";this.style.backgroundColor=\"FFFFFF\"' onmouseout='this.style.color=\"FFFFFF\";this.style.backgroundColor=\"63b8ee\"' onclick='$(\".popup\").hide();$(\"*:focus\").val(\"".$section."\");$(\"*:focus\").next().next().next().val(\"".$course_title."\");$(\"*:focus\").next().next().next().next().next().val(\"".$credits."\");enter_data.ext_course_id0.value=\"".$ext_course_id."\"'>".$section."</li>"; 

     } 
     $output.="</ul>"; 
    echo $output; 
?> 

가 좋아, 지금 여기에 양식에 대한 HTML입니다 :

<div class="cloneMe"> 
      <div> 

       <label for="course_section0" class="">Section: <span class="requiredField">*</span></label> 
       <input type="text" class="cinputs needsPopup" name="course_section[]" id="course_section0" size="8" onfocus="check_contents();" ONKEYUP="get_section(this.value,$('#school_id').val());" autocomplete="off">&nbsp; 
       <input type="hidden" class="" name="ext_course_id[]" id="ext_course_id0"> 
       <label for="course_name0" class="">Name: <span class="requiredField">*</span></label> 
       <input type="text" class="cinputs" name="course_name[]" id="course_name0" size="30">&nbsp; 
       <label for="course_credits0" class="">Credits: <span class="requiredField">*</span></label> 
       <input type="text" class="cinputs" name="course_credits[]" id="course_credits0" size="3">&nbsp; 
       <label for="course_grade0" class="">Grade: <span class="requiredField">*</span></label> 
       <select class="cinputs" name="course_grade[]" id="course_grade0"> 
        <option>Grade:</option> 
        <option>A</option> 
        <option>A-</option> 
        <option>B+</option> 
        <option>B</option> 
        <option>B-</option> 
        <option>C+</option> 
        <option>C</option> 
        <option>C-</option> 
        <option>D+</option> 
        <option>D</option> 
        <option>D-</option> 
        <option>F</option> 
        <option>P</option> 
        <option>CR</option> 
        <option>NC</option> 
        <option>IP</option> 
        <option>I</option> 

       </select>&nbsp; 
       <label for="hours_awarded0" class="">Hours Awarded: <span class="requiredField">*</span></label> 
       <input type="text" class="cinputs" name="hours_awarded[]" id="hours_awarded0" size="3">&nbsp; 
       <label for="baker_equiv0" class="">Baker Equivalent: <span class="requiredField">*</span></label>  
       <input type="text" class="cinputs needsPopup" name="baker_equiv[]" id="baker_equiv0" size="8" ONKEYUP="get_equiv(this.value);">&nbsp;<input type="hidden" class="" name="baker_equiv_id[]" id="baker_equiv_id0"> 
       <label for="quest0" class="">Quest: <span class="requiredField">*</span></label> 
       <input type="text" class="cinputs" name="quest[]" id="quest0" size="3">&nbsp; 
       <button type="button" class="clone">Add Course</button> 
        <button type="button" class="remove">Remove</button> 
      </div> 

링크가 빨간색으로 괄호 안에 복제 된 형태를 보여줍니다. 어떤 제안에 대한

http://www.rp-software.com/Screenshot.JPG

감사합니다!

Answer 1

먼저 각 li의 모든 스타일과 동작을 출력하는 대신 별도의 CSS 및 자바 스크립트 파일로 이동하는 것이 좋습니다. 귀하의 onmouseover 및 예를 들어 onmouseout은 호버 규칙에 의해 대체 될 수있다 : 당신의 PHP 스크립트가 li에 삽입 된 값에 대한

.resultcss { 
    color:#FFFFFF; 
    background-color:#63b8ee; 
} 

.resultcss:hover { 
    color:#63b8ee; 
    background-color:#FFFFFF; 
} 

, 당신은 HTML5에게 data 속성을 사용할 수 있습니다. 당신이 그것을 복제하는 경우, 데이터가 보존됩니다

$output.="<li class='resultcss' data-section='".$section."' data-title='".$course_title."' data-credits='".$credits."' data-id='".$ext_course_id."'>".$section."</li>"; 

onclick 콜백 (복제 된 것을 포함)뿐만 아니라 현재와 미래의 요소를 작동 jQuery의 on 기능, 사용

$('body').on('click', '.resultcss', function(e) { 
    var data = $(this).data(); 
    $(".popup").hide(); 
    $("*:focus").val(data.section) 
     .next().next().next().val(data.title) 
     .next().next().val(data.credits); 
    enter_data.ext_course_id0.value = data.id; 
}); 

을

나는 여전히 next을 사용함에 유의하십시오. 당신은 정말 피하고 싶은 경우에, 당신은 당신의 HTML에 추가 클래스를 사용할 수 있습니다

<input type="text" class="cinputs course_title" name="course_name[]" id="course_name0" size="30">&nbsp; 
<input type="text" class="cinputs course_credits" name="course_credits[]" id="course_credits0" size="3">&nbsp; 

그런 다음이 find 또는 children 사용을 참조하십시오 (이전의 상황으로 돌아가려면 end 사용) :

$("*:focus").val(data.section) 
     .find('.course_title').val(data.title).end() 
     .find('.couse_credits').val(data.credits);