刷新时删除 DOM 元素

Remove DOM element on refresh

本文关键字：元素 DOM 删除 刷新      更新时间：2023-09-26

我必须为办公室的圣诞派对编写一个彩票游戏。因为我对jQuery的知识为零，而且在JavaScript方面只有次要的技能，所以我用谷歌搜索并找到了整洁的小脚本（见下面的代码）。刷新页面时如何从列表中删除获胜者？我甚至有可能读到一些关于 jQuery .remove()的东西。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Auslosung</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!-- jQuery einbinden -->
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
        /* Wenn der Body geladen ist werden die enthaltenen Funktionen ausgeführt.
        $(document).ready(function(){ ... }); Alle in dieser enthaltenen Funktionen werden entsprechd erst bei geladenem Body ausgeführt */
        $(document).ready(function(){
            /* Der Button mit der id #auslosungstarten wird mit einer click Funktion belegt. */
            $('#auslosungstarten').click(function(){
                /* Der Button selbst wird ausgeblendet */
                $(this).hide('slow');
                /* Ein Interval wird gestartet und die Funktion auslosung() alle 300 Milisekunden ausgeführt */
                intVal = window.setInterval("auslosung()", 300);
                /* Nach 5 Sekunden wird der Gewinner gezogen */
                window.setTimeout("winneris()", 5000);
                /* return false verhindert, dass der href des Links aufgerufen wird */
                return false;
            });
            auslosung = function(){
                /* member enthält die Anzahl der Teilnehmer der Verlosung */
                member = $('.member li').length;
                /* 
                Math.random() generiert eine Zufallszahl.
                Diese mit den Teilnehmern multipliziert ergebit den index Wert eines der Teilnehmer.
                 */
                randNum = Math.floor(Math.random()*member);
                /* Die CSS Klasse "win" wird von allen li's entfernt und ... */
                $('.member li').removeClass('win');
                /* ... für den durch die Zufallszahl gewählten Teilnehmer neu gesetzt */
                $('.member li:eq('+randNum+')').addClass('win');

                /* Diese Funktion wiederholt sich alle 300 Milisekunden.
                Dadurch entsteht das Muster, dass immer ein anderer Teilnehmer markiert wird.
                */
            }
            winneris = function(){
                /* Nachdem 30 Sekunden lang zufällige Teilnehmer markiert wurden, wird der Intervall nun beendet */
                clearInterval(intVal);
                /* Der zuletzt markierte Teilnehmer wird nun als Gewinner gezogen */
                winner = $('.member li.win').html();
                /* Der Gewinner wird in der #andthewinneris ausgegeben. */
                $('#andthewinneris').html('Gewonnen hat: <strong>'+winner+'<'/strong>');

            }
        });
        </script>
        <style type="text/css">
        /* Das ist der CSS Code zum Verlosungs-System und bedarf meiner Meinung nach keiner weiteren Erklärung */
        *{outline:none;padding:0px;margin:0px;}
        body{padding:40px;font:14px "Myriad Pro";color:#333;}
        h1{margin-bottom:20px;font-size:26px;font-weight:normal;}
        .member{list-style:none;width: 100%;}
        .member li{padding:10px;width:160px;background:#efefef;border:1px solid #ddd;margin:0 10px 10px 0;float:left;text-align:center;}
        .member li.win{background:#fff9d7;border:1px solid #e2c822;}
        #auslosungstarten{padding:10px;width:160px;background:#f24f04;border:1px solid #c13d00;margin:0 10px 10px 0;float:left;text-align:center;font-weight:bold;text-decoration:none;display:block;color:#fff;margin-top:40px;}
        #andthewinneris{margin-top:40px;font-size:26px;font-weight:normal;color: #f24f04;}
        </style>
    </head>
    <body>
        <h1>Geschenkeverlosung</h1>
        <!-- Dashier ist die Liste der Teilnehmer von der Verlosung -->
        <div style="width:200px; float:left;">
        <ul class="member">
            <li>Adamec Simone</li>
            <li>Aktas Murat</li>
            <li>Alfare Simone</li>
            <li>Alge Andreas</li>
            <li>Auer Christoph</li>
            <li>Aydin Azim</li>
            <li>Berchtold Jörg</li>
            <li>Berchtold Wolfgang</li>
            <li>Berger Albert</li>
            <li>Biket Cengiz</li>
            <li>Bilger Thomas</li>
            <li>Bittner Brigitte</li>
            <li>Blacha Johannes</li>
            <li>Blum Thomas</li>
            <li>Boch Peter</li>
            <li>Bösch Heike</li>
            <li>Bösch Markus</li>
            <li>Bösch Marlon</li>
            <li>Brakhage Dietmar</li>
            <li>Brunold Jürgen</li>
            <li>Büttner Maik</li>
            <li>Ciani Andrea</li>
            <li>Collini Martin</li>
            <li>Coric Josip</li>
        </ul></div><div style="float:right;">
        <!-- Button zum starten der Verlosung -->
        <a href="#" id="auslosungstarten">Auslosung starten...</a>
        <!-- Ausgabe des Gewinners: -->
        <h1 id="andthewinneris"></h1></div><br clear="all" />
    </body>
</html>

这是可能的，但你需要一些进一步的js函数（例如cookie）。

HTML只是每次加载相同的人员列表。如果你想改变它，你可以通过从饼干或其他东西（如本地存储）中取出卷轴来删除它们

我认为这是留在网站上的最佳方式，直到您完成。

您可以使用jquery暂时删除它，然后继续进行抽签，直到您重新设置页面。

摆

弄了我的代码。

            window.setTimeout("winneris()", 5000);
            /* return false verhindert, dass der href des Links aufgerufen wird */
            // zeigt den auslosen button wieder an.
            window.setTimeout(function(){
                $('#auslosungstarten').show();
            }, 7000);

题外话：

你为什么不直接用一个袋子，里面有一些纸，上面有名字？它更有趣，你不需要技术来制作汤博拉。

相关文章：