0

我有一个用于 Ajax 调用的 php 页面。<ul>它以 a和<li>items的形式产生输出。这些项目被用作原始页面上输入字段的自动完成。我遇到的问题是找到一种优雅的方法来更新其他字段，其中一些是隐藏的，在用户克隆它们之后，基于此 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

感谢您的任何建议！

4

1 回答 1

0

li首先，考虑将它们移动到单独的 css 和 javascript 文件中，而不是为每个输出每个样式和行为。例如，您的onmouseoverandonmouseout可以被悬停规则替换：

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

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

对于您的 php 脚本在 中插入的值li，您可以使用 HTML5data属性。如果克隆它，数据将被保留：

$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然后使用or引用它children（使用end返回之前的上下文）：

    $("*:focus").val(data.section)
        .find('.course_title').val(data.title).end()
        .find('.couse_credits').val(data.credits);
于 2012-09-18T20:37:29.930 回答