javascript - Jquery 比较选中的数据/对象差异

Question

我正在尝试创建一个复选框来突出显示 div 而非表中数据之间的差异。

因此，如果行有差异“单例、单例、已婚”，则应突出显示。

http://jsfiddle.net/Ly61u493/1/

逻辑:

$('.check-diff').click(function() {
if($(this).prop('checked')){
    //highlight status except header
    alert("Bang highlight it...");
} else{
    //unchecked should remove the highlight areas
    alert("Not highlighted");
}
});

    <label for="">Click to see differences</label>
<input type="checkbox" class="check-diff">
<div class="compare-diff">
    <div class="row header">
        <div class="col-sm-3 title">Name</div>
        <div class="col-sm-3">John</div>
        <div class="col-sm-3">Henry</div>
        <div class="col-sm-3">Kim</div>
    </div>
    <div class="row">
        <div class="col-sm-3 title">Status</div>
        <div class="col-sm-3 diff">Single</div>
        <div class="col-sm-3 diff">Married</div>
        <div class="col-sm-3 diff">Single</div>
    </div>
    <div class="row">
            <div class="col-sm-3 title">Car</div>
            <div class="col-sm-3 diff">Yes</div>
            <div class="col-sm-3 diff">Yes</div>
            <div class="col-sm-3 diff">Yes</div>
    </div>
</div>

Answer 1

下面的 jquery 代码怎么样？

$('.check-diff').click(function() {
if($(this).prop('checked')){
    checkDiff();
} else{
    $(".row").each(function(){
        $(this).css("background-color","#fff");
    });
}
});

function checkDiff(){
$(".row").each(function(){
    var diff = false;
    var source = $(this).find(".diff").first().text();
    $(this).find(".diff").each(function(){
        var compare = $(this).text();
        if(source != compare){
           diff = true;
        }
    });   
    if(diff == true){
        $(this).css("background-color","red");
    }
 });
}

希望我没说错，并且你知道如何继续前进! :)