Question

我有以下代码，它为3列生成一个随机数，并检查生成的数字是否超过其先前数字的+ 5 / -5。但是，对于我当前的代码，前两列始终会获得应用于它的闪烁css，即使它们生成的数字不超过其先前值的范围。 jsfiddle链接：https://jsfiddle.net/d5ykog23/

代码：

public class ProjectExplorerPart {

  protected TreeViewer viewer;

  @PostConstruct
  public void createComposite(Composite parent, IEclipseContext context) {
    //...

    OpenProjectItemHandler handler
        = ContextInjectionFactory.make(OpenProjectItemHandler.class, context);

    viewer.addDoubleClickListener(handler);

    //...
  }
}

关于从整个表中删除blink类的附加问题：我尝试了以下代码但没有成功：

var x = document.getElementById("tableContainer");
var i;
var n = 0;
var m;

$("#genNum").click(function(){

    for(j = 0; j < x.rows[1].cells.length; j++){
        m = x.rows[1].cells[j].innerHTML;
        i = Math.random() * (20 - 1) + 1;
        x.rows[1].cells[j].innerHTML = Math.round(i);
        n = x.rows[1].cells[j].innerHTML

        if (!((+m - 5) < n && (+m + 5) > n)) {
            $("#tableContainer th:nth-child(" + j + "), #tableContainer td:nth-child(" + j + ")").addClass("blink");
        }
    }
});

Answer 1

以下链接提供了答案 https://jsfiddle.net/r98yrpo3/

$(document).ready(function(){
    // var x = document.getElementById("tableContainer").rows[1].cells;
    var x = document.getElementById("tableContainer");
    var i;
    var n = 0;
    var m;
    var alarm = document.createElement("AUDIO");
    alarm.setAttribute("src", "alarm.mp3");

    alarm.addEventListener('ended', function() {
        this.play();
    }, false);


    $("#genNum").click(function(){
				$("#tableContainer td").removeClass("blink");       
        $("#tableContainer th").removeClass("blink");
        for(j = 0; j < x.rows[1].cells.length; j++){
        
            m = x.rows[1].cells[j].innerHTML;
            
            i = Math.random() * (20 - 1) + 1;
            x.rows[1].cells[j].innerHTML = Math.round(i);
            n = x.rows[1].cells[j].innerHTML

               


            if (m-n <= 5 && m-n >=-5) {
                // console.log("flag");
                $("#tableContainer th:nth-child(" + (j+1) + "), #tableContainer td:nth-child(" + (j+1) + ")").addClass("blink");
                // alarm.play();
            }
        }
    });


    $("#stopAlarm").click(function(){
        $("#tableContainer td").removeClass("blink");       
        $("#tableContainer th").removeClass("blink");

    });
});

/*table formatting*/
table, th, td {
    border: 1px solid black;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

/*
tr:nth-child(even) {
    background-color: #dddddd;
}
*/

/*css class to apply blinking effect*/
.blink {
    animation:blink 300ms infinite alternate;
}
/*blink effect color switcher*/
@keyframes blink {
    from { background-color: white; }
    to { background-color: red; }
};

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="myModule.js"></script>
        
        <title>Test</title>

    <body>
        <h1 id="greeting">Test Greetings</h1>
        <table id="tableContainer">
            <tr>
                <th field="col1">-----</th>
                <th field="col2">-----</th>
                <th field="col3">-----</th>
            </tr>
            <tr>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>-----</td>
                <td>-----</td>
                <td>-----</td>
            </tr>
        </table>
        
        <!-- <button id="alarm" type="button">Alarm</button> -->
        <button id="stopAlarm" type="button">Stop Alarm</button>
        <button id="genNum" type="button">Generate Number</button>
    </body>

如何仅将类应用于特定的表列？

1 个答案: