Question

您好我有关于更改DOM中元素的问题。我有一种情况，每当我点击按钮时它会显示一个div。 2秒后，初始div被另一个div替换，该div还有一个函数调用，再次删除div。

现在是棘手的部分。我想要的是每当我再次隐藏div时，第三次点击该按钮将再次显示div。

让我再解释一下。想象一下，我遇到了以下情况：

首先鼠标点击按钮1（结果：显示红色div）
第二次鼠标点击按钮1（结果：隐藏红色div）
第三次鼠标点击按钮1（再次显示div）

第三个子弹是棘手的。我怎样才能做到这一点？因为当我第三次点击按钮1时，它不再显示任何内容，因为我没有将其更改回原始状态

到目前为止我的代码JSFIDDLE

function Test(){
    var target = window.event.target || window.event.srcElement;
    console.log(target);

    var content = arguments[0];
    console.log(content);

    $( "body" ).append( "<div class='red'>"+content+"</div>" );

    setTimeout(function(){
          $( ".press" ).replaceWith( "<button class='press' onclick='UnTest()'>button 1</button>" );
    }, 2000);
}

function UnTest(){
    $( ".red").remove();
}

请注意由于实施限制，如果点击按钮，我无法在我的功能中查看（例如$(".red").click()）

Answer 1

使用变量计算点击次数，最初等于0.然后，每次单击按钮时，将变量增加1并检查变量是奇数还是偶数。如果它很奇怪，你可以添加div，如果它甚至你删除了div：

var clicked = 0;

function Test() {
    clicked++;
    var content = arguments[0];
    if (clicked % 2 === 1) {
        $("body").append("<div class='red'>" + content + "</div>");
    } else {
        $(".red").remove();
        clicked = 0;
    }
}

小提琴：https://jsfiddle.net/2mvqmtwq/5/

提示：当变量均匀时，您可以将变量重置为0。

Answer 2

有几种方法可以实现这一点，但快速解决方案可能只是切换按钮的onclick属性（而不是完全替换它）。

// In setTimeout
setTimeout(function(){
    $('.press').attr('onclick', 'UnTest()');
}, 2000);

function UnTest(){
    $( ".red").remove();
    $('.press').attr('onclick', 'Test("one")');
}

https://jsfiddle.net/2mvqmtwq/1/

这还允许您添加多个.red div（类似于原始小提琴），然后单击一下（另一个答案不考虑，而是将其视为简单的可见性切换）

修改：对于多个按钮/实例（根据您的评论），您需要一个排序标识符。通过声明我们可以使用的target，您的原始代码变得简单了。我们说我们有三个按钮：

<button class="press" onclick="Test('one')">button 1</button>
<button class="press" onclick="Test('two')">button 2</button>
<button class="press" onclick="Test('three')">button 3</button>

除了引用我们传递的字符串值（您声明为content）之外，我们更新的JS不会发生太大的变化：

setTimeout(function(){
    $(target).attr('onclick', 'UnTest("' + content + '")');
}, 2000);

除了引用您在顶部声明的target之外（还允许我们保持每个按钮实例的唯一性）。

这里是我所做的所有更改的更新小提琴（附加参数，红框的范围类名称等）：

https://jsfiddle.net/2mvqmtwq/9/

Answer 3

这是一个死的简单修复。我认为通过一些重构，我们可以更干净地完成这一切。但是既然你提到了实施限制，我不想提供可能打破这些限制的解决方案。

只需在UnTest（）函数中添加逻辑

即可

function UnTest(){
    $( ".red").remove();
    $( ".press" ).replaceWith( "<button class='press' onclick='Test(\"hello\")'>button 1</button>" );
}

Answer 4

如何编写一些干净的代码，避免使用内联事件处理程序？

你可能做的是：

首先点击：添加gsub("[-.?!]", "***", gsub("(?![-.?!'])[[:punct:]]", "", txt, perl=T))
接下来点击：检查div是否已存在。如果是，只需切换它的显示而不是删除它。

这只是一个关于如何做到这一点的演示。这个也适用于多个按钮/ div。正如我之前所说，我已经删除了内联事件处理程序，并将div类和函数参数添加为数据属性。您可以随意编辑代码以满足您的需求。

＆＃13;

div

＆＃13;

$(document).on("click", ".press", function() {

    var $this = $(this);
    var $div = $("div." + $this.data("class"));
    
    if ($div.length) {
        $div.toggle();
        return;
    }

    $( "body" ).append( $("<div/>", {
        'class': $this.data("class"),
        'html': $this.data("param")
    }) );
});

＆＃13;

button{ margin:10px}
div {
    width:200px;
    height:50px;
}
.red {
    background-color:red;
}
.blue {
    background-color:blue;
}
.green {
    background-color:green;
}
.orange {
    background-color:orange;
}

＆＃13;

点击返回初始状态

4 个答案: