javascript - After click return to initial state - Stack Overflow

admin管理员组

文章数量:1426648

Hello I got a question regarding changing elements in the DOM. I got a situation that whenever I click on the button it will show a div. After 2 seconds the initial div is replaced by another div which also got a function call that removes the div again.

Now es the tricky part. What I want is that whenever I hide the div again, the third click on the button will show the div again.

Let me explain a bit more. Imagine that I got the following situation:

• First mouse click on button 1 (Result: shows red div)
• Second mouse click on button 1 (Result: hide red div)
• Third mouse click on button 1 (shows the div again)

The third bullet is the tricky one. How can I do that? Because when I click for the third time on button 1 it does not show anything anymore because I did not change it back to the original state

The code that I have so far 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();
}

Please note that due to implementation restrictions I can not check within my Function if the button is clicked (eq. $(".red").click())

Hello I got a question regarding changing elements in the DOM. I got a situation that whenever I click on the button it will show a div. After 2 seconds the initial div is replaced by another div which also got a function call that removes the div again.

Now es the tricky part. What I want is that whenever I hide the div again, the third click on the button will show the div again.

Let me explain a bit more. Imagine that I got the following situation:

• First mouse click on button 1 (Result: shows red div)
• Second mouse click on button 1 (Result: hide red div)
• Third mouse click on button 1 (shows the div again)

The third bullet is the tricky one. How can I do that? Because when I click for the third time on button 1 it does not show anything anymore because I did not change it back to the original state

The code that I have so far 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();
}

Please note that due to implementation restrictions I can not check within my Function if the button is clicked (eq. $(".red").click())

• javascript
• jquery

Share Improve this question Follow edited Aug 6, 2015 at 17:25 Rotan075 asked Aug 6, 2015 at 17:23 Rotan075Rotan075 2,61555 gold badges3737 silver badges5656 bronze badges 4

• So you want to toggle the visibility of a div on and off from clicking a button? – depperm Commented Aug 6, 2015 at 17:25
• The thing is that the DIV is not already in the DOM. I set it with the function. In my example toggle visibility would work I guess. But would it also work if I got multiple buttons each pointing to the same function test with each a different parameter? @depperm – Rotan075 Commented Aug 6, 2015 at 17:27
• can you always have the div in the DOM, with an initial class that make it invisible, so when the button is clicked you toggle that class? – Yerko Palma Commented Aug 6, 2015 at 17:33
• No, you have to see as a tooltip function. You create the tooltip object in the dom and when you hide the tooltip, the tooltip will be destroyed and not longer be visible in your DOM @YerkoPalma – Rotan075 Commented Aug 6, 2015 at 17:48

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

There are a few ways you could acplish this, but a quick solution might be just toggling the onclick attribute of the button (rather than replacing it entirely).

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

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

https://jsfiddle/2mvqmtwq/1/

This will also allow you to add multiple .red divs (similar to the original fiddle) and then remove with a single click (which another answer does not take into account, instead treating it as a simple visibility toggle).

Edit: For multiple buttons/instances (per your ment), you'll need an identifier of sort. Your original code made it easy by declaring the target, which we can use. Let's say we have three buttons:

<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>

Our updated JS doesn't change too much, other than referencing the string value we passed (which you declare as content):

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

As well as referencing the target you've declared at the top (which allows us to keep each button instance unique).

Here's the updated fiddle with all the changes I made (additional parameters, scoped class names for the red boxes, etc):

https://jsfiddle/2mvqmtwq/9/

Use a variable to count the number of clicks, which is initially equal to 0. Then, each time you click the button, you increase the variable by 1 and check if the variable is odd or even. If it's odd, you add the div, if it's even you remove the 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;
    }
}

Fiddle: https://jsfiddle/2mvqmtwq/5/

Tip: you can reset the variable back to 0 when it's even.

Here's a dead simple fix. I think we can do this whole thing a lot more cleanly with some refactoring. But since you mention implementation restraints, I don't want to offer a solution that might break those restraints.

Simply add logic to your UnTest() function

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

How about writing some clean code, avoiding inline event handlers?

What you could probably do is:

• First click: add the div
• Next click onwards: check if the div already exists. If yes, simply toggle it's display as opposed to removing it.

This is only a demo as to how this could be done. This one also works for multiple buttons/divs. As I said earlier, I have removed inline event handlers and added the div class and function params as data-attributes. Feel free to edit the code to suit your needs.

$(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")
    }) );
});

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

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="press" data-param="one" data-class="red">button 1</button>
<button class="press" data-param="two" data-class="blue">button 2</button>
<button class="press" data-param="three" data-class="green">button 3</button>
<button class="press" data-param="four" data-class="orange">button 4</button>

本文标签： javascriptAfter click return to initial stateStack Overflow