比较两个html块,如果它具有相同的内容

时间:2017-06-15 02:20:08

标签: javascript jquery html

以下是我的情况我有两个fieldset一个将由用户编辑,另一个隐藏以保留fieldset的原始状态然后在javascript onchange将检测到如果用户更改fieldset中的内容,则会将其与隐藏的fieldset进行比较。 但是如何检测用户是否更改了fieldset在我当前的代码中我遵循了本指南 How to compare two HTML elements

但问题是,与隐藏fieldset相比,条件正在返回 false ,更改或未更改

Javascript代码:

  $('#fieldset').on("change", function() {
        console.log( $('#fieldset').html() == $('#fieldsethidden').html() );
            //fieldset_state = 1;
  });

HTML code:

显示给用户的

字段集:

<fieldset class="col-lg-12" style="border: 2px groove; padding:1%; margin-bottom:2%;" id="fieldset">
        <!-- heading -->
        <table class="table">
            <colgroup>
                <col span="1" style="width: 40%;">
                <col span="1" style="width: 35%;">
                <col span="1" style="width: 25%;">
            </colgroup>
            <thead>
            <tr>
                <th>Parameters</th>
                <th>Specifications</th>
                <th>Analyst</th>
            </tr>
            </thead>
        </table>
        <!-- physical test -->
        <table class="table" id="physical_table">
            <colgroup>
                <col span="1" style="width: 40%;">
                <col span="1" style="width: 35%;">
                <col span="1" style="width: 25%;">
            </colgroup>
            </colgroup>
            <h5 style="padding-left:8px;font-weight: bold;">A. Physical Test</h5>
            <hr style="margin-bottom:0px;margin-top:0px;">

            <tbody>
            <?php

            foreach($physical_tests as $physical_test){
            if($fg_status == 9 || $fg_status == 8)
                $phy_id = $physical_test->physical_test_id;
            else
                $phy_id = $physical_test->id;

            $operation = $physical_test->operation;
            $range1 = $physical_test->first_range;
            $range2 = $physical_test->second_range;
            $unit = $physical_test->selected_unit;

            $specification = '';

            if ($unit == 'None') {
                $unit = '';
            }

            if($physical_test->type == 'Text'){
                $specification = $physical_test->specifications;
            }else{
                // located at helpers.php
                $specification = generate_specs($operation, $range1, $range2, $unit);
            }
            ?>
            <tr id = "physical{{$physical_test->id}}">
                <td ><p class="quality-font">{{$physical_test->name}}</p></td>
                <td><p class="quality-font">{{$specification}}</p></td>

                <td>
                    <input placeholder="{{$physical_test->analyst_name}}" value="{{$physical_test->analyst_name}}" list="phy_analyst" type="text" name="physical_analyst[]" id="physical_analyst_{{$phy_id}}" class="form-control physical_analyst" placeholder = "Enter name to find Analyst">
                    <div id="phy_analyst_message_{{$phy_id}}" style = "width:99%; margin-left:0.5%; margin-top:5px; padding:3px 8px; display:none;" class="form-group alert"></div>
                    <datalist id="phy_analyst">
                        @if(count($analysts))
                            @foreach($analysts as $analyst)
                                <option id="{{$analyst->id}}" value = "{{$analyst->first_name}} {{$analyst->last_name}}"></option>
                            @endforeach
                        @endif
                    </datalist>
                </td>
            </tr>
            <?php
            }
            ?>
            </tbody>
        </table>

        <!-- chemical test -->
        <table class="table" id="chemical_table">
            <colgroup>
                <col span="1" style="width: 40%;">
                <col span="1" style="width: 35%;">
                <col span="1" style="width: 25%;">
            </colgroup>
            <h5 style="padding-left:8px;font-weight: bold;">B. Chemical Test</h5>
            <hr style="margin-bottom:0px;margin-top:0px;">
            <tbody>
            <?php
            foreach($chemical_tests as $chemical_test){
            if($fg_status == 9 || $fg_status == 8)
                $chem_id = $chemical_test->chemical_test_id;
            else
                $chem_id = $chemical_test->id;

            $operation = $chemical_test->operation;
            $range1 = $chemical_test->first_range;
            $range2 = $chemical_test->second_range;
            $unit = $chemical_test->selected_unit;

            $c1 = $chemical_test->claim1;
            $cu1 = $chemical_test->claim_unit1;
            $c2 = $chemical_test->claim2;
            $cu2 = $chemical_test->claim_unit2;

            $specification = '';

            if ($unit == 'None') {
                $unit = '';
            }

            if($chemical_test->type == 'Text'){
                $specification = $chemical_test->specifications;
            }else{
                // located at helpers.php
                $specification = generate_specs($operation, $range1, $range2, $unit);
                $label_claim = generate_label_claim($c1,$cu1,$c2,$cu2);
                $specification = $specification .  $label_claim;
            }
            ?>
            <tr id = "chemical{{$chemical_test->id}}">
                <td ><p class="quality-font">{{$chemical_test->name}}</p></td>
                <td><p class="quality-font"><?= $specification ?></p></td>

                <td>
                    <input placeholder="{{$chemical_test->analyst_name}}" value="{{$chemical_test->analyst_name}}" list="chem_analyst" type="text" name="chemical_analyst[]" id="chemical_analyst_{{$chem_id}}" class="form-control chemical_analyst" placeholder = "Enter name to find Analyst">
                    <div id="chem_analyst_message_{{$chem_id}}" style = "width:99%; margin-left:0.5%; margin-top:5px; padding:3px 8px; display:none;" class="form-group alert"></div>
                    <datalist id="chem_analyst">
                        @if(count($analysts))
                            @foreach($analysts as $analyst)
                                <option id="{{$analyst->id}}" value = "{{$analyst->first_name}} {{$analyst->last_name}}">
                            @endforeach
                        @endif
                    </datalist>
                </td>
            </tr>
            <?php
            }
            ?>
            </tbody>
        </table>

        <!-- microbiological test -->
        <table class="table" id="micro_table">
            <colgroup>
                <col span="1" style="width: 40%;">
                <col span="1" style="width: 35%;">
                <col span="1" style="width: 25%;">
            </colgroup>
            <h5 style="padding-left:8px;font-weight: bold;">C. Microbiological Test</h5>
            <hr style="margin-bottom:0px;margin-top:0px;">
            <tbody>
            <?php
            foreach($micro_tests as $micro_test){
            if($fg_status == 9 || $fg_status == 8)
                $micro_id = $micro_test->micro_test_id;
            else
                $micro_id = $micro_test->id;

            $operation = $micro_test->operation;
            $range1 = $micro_test->first_range;
            $range2 = $micro_test->second_range;
            $unit = $micro_test->selected_unit;

            $specification = '';

            if ($unit == 'None') {
                $unit = '';
            }

            if($micro_test->type == 'Text'){
                $specification = $micro_test->specifications;
            }else{
                // located at helpers.php
                $specification = generate_specs($operation, $range1, $range2, $unit);
            }
            ?>
            <tr id = "micro{{$micro_test->id}}">
                <td ><p class="quality-font">{{$micro_test->name}}</p></td>
                <td><p class="quality-font">{{$specification}}</p></td>

                <td>
                    <input placeholder="{{$micro_test->analyst_name}}" value="{{$micro_test->analyst_name}}" list="micro_analyst" type="text" name="physical_analyst[]" id="micro_analyst_{{$micro_id}}" class="form-control micro_analyst" placeholder = "Enter name to find Analyst">
                    <div id="micro_analyst_message_{{$micro_id}}" style = "width:99%; margin-left:0.5%; margin-top:5px; padding:3px 8px; display:none;" class="form-group alert"></div>
                    <datalist id="micro_analyst">
                        @if(count($analysts))
                            @foreach($analysts as $analyst)
                                <option id="{{$analyst->id}}" value = "{{$analyst->first_name}} {{$analyst->last_name}}">
                            @endforeach
                        @endif
                    </datalist>
                </td>
            </tr>
            <?php
            }
            ?>
            </tbody>
        </table>

    <div class="form-group col-lg-12">
        <label for="packagingSpecification" class="control-label col-lg-3">Packaging Specification</label>
        <div class="col-lg-5">
            <input type="text"
                   name="packagingSpecification"
                   id="packagingSpecification"
                   class="form-control"
                   placeholder="Packaging Specification"
                   value="{{$fg_packaging_spec}}"
                   disabled="">
            <div class="help-block with-errors"></div>
        </div>
    </div>

    <div class="form-group col-lg-12">
        <label for="claimedShelfLife" class="control-label col-lg-3">Claimed Shelf Life</label>
        <div class="col-lg-2" style="padding-right:5px;">
            <input type="number"
                   name="claimedShelfLife"
                   id="claimedShelfLife"
                   class="form-control"
                   placeholder="Ex. 24"
                   value="{{$fg_shelf_life}}"
                   disabled>
            <div class="help-block with-errors"></div>
        </div>
        <div class="col-lg-1" style="margin-top:6px;padding-left:0px;" class="pull-left">months</div>
    </div>

    <div class="form-group col-lg-12">
        <label for="storageInformation" class="control-label col-lg-3">Storage Information</label>
        <div class="col-lg-5">
            <input type="text"
                   name="storageInformation"
                   id="storageInformation"
                   class="form-control"
                   placeholder="Storage Information"
                   value="{{$fg_storage_info}}"
                   disabled>
            <div class="help-block with-errors"></div>
        </div>
    </div>

    <div class="form-group col-lg-12">
        <label for="remarks" class="control-label col-lg-3">Remarks / Special Instructions</label>
        <div class="col-lg-5">
            <textarea rows="4" cols="53" id="remarks" name="remarks" placeholder="Enter remarks or special instructions ...">{{$fg_remarks}}</textarea>
            <div class="help-block with-errors"></div>
        </div>
    </div>
</fieldset>

隐藏字段集(相同但显示:无;)

<fieldset class="col-lg-12" style="border: 2px groove; padding:1%; margin-bottom:2%;display:none;" id="fieldsethidden">

</fieldset>

1 个答案:

答案 0 :(得分:0)

非常确定,因为它们是字符串,所以您应该使用===进行比较。

像这样:$('#fieldset').html() === $('#fieldsethidden').html()