使用过滤器进行条件分支

时间:2014-07-08 17:57:38

标签: javascript jquery filter conditional-statements

我正在使用多个jQuery过滤器函数来根据所选选项影响所选对象的背景颜色,并且它可以工作,但它看起来很笨重/多余。有谁知道如何简化/组合这些过滤器语句?我有一个JSFiddle here

感谢。     

<!-- Load minimum jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Load functions -->
  <script type="text/javascript">
<!-- jQuery Functions -->
  $(document).ready(function(){
/* Add 'Contracted' title and change background to green (if not already red) for 'C' services */
    $("select").parent()
    .filter(function(index){
        return $(this).find('option:selected').text() == 'C'; })
    .attr('title','Contracted')
    .addClass(function(index,currentClass) {
        var addedClass;
        if ( currentClass != "cellcolorred" )
            { addedClass = "cellcolorgreen"; }
        return addedClass;
    });
/* Add 'Available' title and change background to green (if not already red) for 'A' services */
    $("select").parent()
    .filter(function(index){
        return $(this).find('option:selected').text() == 'A'; })
    .attr('title','Available')
    .addClass(function(index,currentClass) {
        var addedClass;
        if ( currentClass != "cellcolorred" )
            { addedClass = "cellcolorgreen"; }
        return addedClass;
    });
/* Add 'Expensive' title and change background to orange (if not already red) for 'E' services */
    $("select").parent()
    .filter(function(index){
        return $(this).find('option:selected').text() == 'E'; })
    .attr('title','Expensive')
    .addClass(function(index,currentClass) {
        var addedClass;
        if ( currentClass != "cellcolorred" )
            { addedClass = "cellcolororange"; }
        return addedClass;
    });
/* Add 'Do Not Use' title and change background to pink for 'D' services */
    $("select").parent()
    .filter(function(index){
        return $(this).find('option:selected').text() == 'D'; })
    .attr('title','Do Not Use')
    .addClass("cellcolorpink");
/* Add 'No Service' title to empty services */
    $("select").parent()
    .filter(function(index){
        return $(this).find('option:selected').text() == ''; })
    .attr('title','No Service');
});
</script>

<style type="text/css">

/* body */
    body {
        border: 0;
        margin: 0;
        padding: 0;
        background-color: #A3AFC0;
        font-family: Verdana, Geneva, Arial, sans-serif;
    }

    select::-ms-expand { display: none; }
    select {
        appearance: none;
        -moz-appearance: window;
        -webkit-appearance: none;
        border-style: none;
        background: none;
        color: inherit;
        width: inherit;
        height: 100%;
        vertical-align: middle;
        font: inherit;
        font-size: 13px;
        text-indent: 11.5px;
    } /* Select Cells */
    tbody {
        border-bottom-width: 2px;
        border-bottom-style: solid;
        background-color: #FAFAFA;
    }
    tbody:last-of-type { border-bottom-width: 1px; }
    tbody:nth-child(even) { background-color: #E1E1E1; }
    tbody:hover td[rowspan], tr:hover td { background-color: #FF0; }
    td {
        border-style: solid;
        border-color: inherit;
    }
/* tfoot */
    tfoot {
        border-width: 1px;
        font-weight: bold;
        background-color: #E1E1E1;
    }
/* Classes */
/* table */
    .tablesorter {
        table-layout: fixed;
        font-size: 11px;
        border-collapse: collapse;
        border-spacing: 0;
        border-color: #6E7984;
    }

/* header */
    .tablesorter th,
    .tablesorter thead td {
        height: 24px;
        text-shadow: 0 0 4px #FFF;
        text-align: center;
        color: #000;
        font-size: 11px;
        background-color: #22A5C9 !important;
        padding: 0;
    }
/* tbody */
    .tablesorter td {
        text-align: center;
        width: 33.5px;
    }

    .cellcolorred {
        font-weight:bold;
        color: #FFF;
        background-color: #F00 !important;
    }
    .cellcolorgreen { background-color: #CFC !important; }
    .cellcolororange { background-color: #FC9 !important; }
    .cellcolorpink { background-color: #FCC !important; }
</style>

  </head>
<!-- Body -->
  <body>
<!-- Table -->
  <table border="1" class="tablesorter" id="table-1">
<!-- Table Header -->
    <thead>
        <tr>
            <td>ID</td>
            <td>Alarm</td>
            <td>Bflow</td>
            <td>Burg</td>
            <td>ELt</td>
            <td>Eng</td>
        </tr>
    </thead>
<!-- Table Footer -->
    <tfoot>
        <tr>
            <td colspan='100%'>1 Location</td>
        </tr>
    </tfoot>
<!-- Table Body -->
    <tbody>
        <tr id="1">
            <td>AL08960</td>
            <td id="Alarm">
                <select>
                <option selected>C</option>
                <option>A</option>
                <option>E</option>
                <option disabled>-</option>
                <option>D</option>
                <option></option>
                </select>
            </td>
            <td id="Bflow">
                <select>
                <option>C</option>
                <option selected>A</option>
                <option>E</option>
                <option disabled>-</option>
                <option>D</option>
                <option></option>
                </select>
            </td>
            <td id="Burg">
                <select>
                <option>C</option>
                <option>A</option>
                <option>E</option>
                <option disabled>-</option>
                <option>D</option>
                <option selected></option>
                </select>
            </td>
            <td id="ELt">
                <select>
                <option>C</option>
                <option>A</option>
                <option selected>E</option>
                <option disabled>-</option>
                <option>D</option>
                <option></option>
                </select>
            </td>
            <td id="Eng">
                <select>
                <option>C</option>
                <option>A</option>
                <option>E</option>
                <option disabled>-</option>
                <option selected>D</option>
                <option></option>
                </select>
            </td>
        </tr>
    </tbody>
  </table>
 <table id="header-fixed"></table>
</body>

0 个答案:

没有答案