0

当倒计时达到 0 时，我想关闭并创建一个新的 div。我的 div 看起来像这样

<div id="bij2">Test
    <div id="bij2Blauw">
        <table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="3" class="titel">Resterende tijd</td>
            </tr>
            <tr>
                <td height="25" colspan="3" align="center" valign="middle">
                    <input id="aktie2" type="text" class="countdownTekst" size="27" readonly="readonly">
                    <script language="javascript">
                        countdown(2012, 7, 29, 'aktie2', 'bij2')
                    </script>
                </td>
            </tr>
            <tr>
                <td height="60">
                    <input name="kopen1" type="submit" class="kopen" id="kopen1" value="Koop nu"
                    />
                </td>
                <td height="60" colspan="2" align="right" valign="bottom">
                    <span class="euro">&#8364;</span>
                    <span class="prijs">14,95</span>
                </td>
            </tr>
        </table>
    </div>
</div>

这是倒计时

function countdown(yr, m, d, idCountdown, divId) {
    var theyear = yr;
    var themonth = m;
    var theday = d;
    var today = new Date();
    var todayy = today.getYear();
    if (todayy < 1000) todayy += 1900
    var todaym = today.getMonth();
    var todayd = today.getDate();
    var todayh = today.getHours();
    var todaymin = today.getMinutes();
    var todaysec = today.getSeconds();
    var todaystring = montharray[todaym] + " " + todayd + ", " + todayy + " " + todayh + ":" + todaymin + ":" + todaysec;
    var futurestring = montharray[m - 1] + " " + d + ", " + yr;
    var dd = Date.parse(futurestring) - Date.parse(todaystring);
    var dday = Math.floor(dd / (60 * 60 * 1000 * 24) * 1);
    var dhour = Math.floor((dd % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1);
    var dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1);
    var dsec = Math.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1);
    var dag = "dagen";

    if (dday <= 0 && dhour <= 0 && dmin <= 0 && dsec <= 0) {
        document.getElementById(idCountdown).value = "voorbij";
        $(document.getElementById(divId)).fadeOut(2000);
        //removeElements(document.getElementById(divId));
        setTimeout("creatediv(document.getElementById(divId))", 3000);
        return;
    } else if (dday <= 1) {
        dag = 'dag';
    }
    document.getElementById(idCountdown).value = dday + ' ' + dag + ' ' + dhour + " uur " + dmin + " min " + dsec + " sec";
    setTimeout(function () {
        countdown(theyear, themonth, theday, idCountdown);
    }, 1000);
}

因此，当时间结束时，它将使用 jQuery 淡出 div。然后我想创建一个新的div。我用这个：

function creatediv(id) {

    var newdiv = document.createElement('div');
    newdiv.setAttribute('id', id);
    newdiv.className = 'newclass';
    newdiv.style.float = "left";
    newdiv.innerHTML = "nothing";

    document.body.appendChild(newdiv);
    alert(id + 'gemaakt');
}

但这会在页面底部创建一个 div，我希望在与淡出的 div 相同的位置创建一个新的 div。我需要改变什么？

4

5 回答 5

7

你试过replaceWithjQuery吗？

于 2012-07-26T11:25:50.243 回答
5

这真的很简单：

$('#bij2').replaceWith( newcontent );
于 2012-07-26T11:27:15.347 回答
1

您的代码中根本没有使用 jQuery。您犯的错误是您没有替换节点，而是在其后追加新节点。您正在寻找的功能是replaceChild.

node.replaceChild(oldNode, newNode)
于 2012-07-26T11:29:30.757 回答
1

如果你想用 div 3 替换 div 2

<div id="1"><div id = "2"></div></div>

您可以使用

$("#1").html('<div id="3"></div>')

或者你可以使用

$("#2").replaceWith('<div id="3"></div>')
于 2012-07-26T11:29:31.630 回答
1

您说过“使用 jQuery”，但您似乎没有使用 jQuery。

如果你真的在使用/打算开始使用 jQuery，那么Rahul 的答案就是你想要的。

如果没有，那么您正在寻找parentNode、insertBefore和removeChild，例如：

// Assuming olddiv refers to the old div
var parent = olddiv.parentNode;
parent.insertBefore(newdiv, olddiv);
parent.removeChild(olddiv);

这会将新 div 插入旧 div 之前，然后删除旧 div。

所以也许：

function replacediv(oldid, id) {

    var newdiv = document.createElement('div');
    newdiv.id = typeof id !== "undefined" ? id : oldid; // Use old ID if no new one specified
    newdiv.className = 'newclass';
    newdiv.style.float = "left";
    newdiv.innerHTML = "nothing";

    var olddiv = document.getElementById(oldid);
    var parent = olddiv.parentNode;
    parent.insertBefore(newdiv, olddiv);
    parent.removeChild(olddiv);
    alert(id + 'gemaakt');
}

...然后用旧 ID 和新 ID 调用它。

附带说明：您不必使用setAttributefor id。它是元素实例上的反射属性。

于 2012-07-26T11:33:07.887 回答