这是我的情况，我有两个 fieldset ，一个将由用户编辑，另一个隐藏以保留 fieldset 的原始状态，然后在 javascript onchange 将检测用户是否更改了 fieldset 中的某些内容，然后将其与隐藏的 fieldset 进行比较。 但是如何检测用户是否更改了字段集？在我当前的代码中，我遵循了本指南
How to compare two HTML elements
但问题是条件返回false，与隐藏的字段集相比，已更改或未更改
Javascript代码:
$('#fieldset').on("change", function() {
console.log( $('#fieldset').html() == $('#fieldsethidden').html() );
//fieldset_state = 1;
});
HTML 代码:
向用户显示的字段集:
<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>
最佳答案
非常确定，因为它们是字符串，所以您应该使用 === 进行比较。
像这样:$('#fieldset').html() === $('#fieldsethidden').html()
关于javascript - 比较两个 html block 是否具有相同的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44557489/