После щелчка вернитесь в исходное состояние

Question

Здравствуйте, у меня возник вопрос об изменении элементов в DOM. У меня сложилась ситуация, что всякий раз, когда я нажимаю на кнопку, у нее появляется div. Через 2 секунды начальный div заменяется на другой div, который также получил вызов функции, который снова удаляет div.

Теперь идет сложная часть. Я хочу, чтобы всякий раз, когда я снова скрываю div, третий щелчок на кнопке снова отображает div.

Позвольте мне объяснить немного больше. Представьте себе, что у меня следующая ситуация:

• Первого щелчок мыши по кнопке 1 (Результат: показывает красные дела)
• Второго щелчок мыши по кнопке 1 (Результат: скрыть красные дела)
• Третьих мышей на кнопка 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

Есть несколько способов, которыми вы могли бы выполнить это, но быстрое решение может быть просто переключением атрибута кнопки (а не его полной замены).

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

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

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

Это также позволит вам добавить несколько .red дивы (по аналогии с оригинальной скрипкой), а затем удалить с помощью одного клика (который еще один ответ не принимает во внимание, вместо того, чтобы рассматривать его как простой переключатель видимости).

Редактировать: Для нескольких кнопок/экземпляров (за ваш комментарий) вам понадобится идентификатор сортировки.Ваш исходный код упростил, объявив 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> 

Наш обновленный JS не меняется слишком много, кроме ссылки на значение строки мы прошли (которые вы возвещать content):

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

Как ссылаясь на target, которые вы указали наверху (что позволяет нам сохранить уникальный экземпляр каждой кнопки).

Вот обновленная скрипку со всеми изменениями, которые я сделал (дополнительные параметры, область видимости имен классов для красных коробок и т.д.):

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

Answer 2

Вот мертвое простое исправление. Я думаю, что мы можем сделать все это намного более чисто с некоторыми рефакторингами. Но поскольку вы упоминаете ограничения реализации, я не хочу предлагать решение, которое может нарушить эти ограничения.

Просто добавить логику к вашему UnTest функция

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

Answer 3

() Используйте переменную для подсчета количества кликов, которое изначально равна 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; 
    } 
} 

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

Подсказка: вы можете сбросить переменную обратно в 0, когда это даже.

Answer 4

Как о написании немного чистого кода, избегая встроенные обработчики событий?

То, что вы, вероятно, могли бы сделать, это:

• Первый щелчок: добавить div
• Далее нажмите далее: проверить, если div уже существует. Если да, просто переключите отображение, а не удаляйте его.

Это демонстрация только того, как это можно сделать. Это также работает для нескольких кнопок/div. Как я уже говорил, я удалил обработчики событий inline и добавил атрибуты div и функции как атрибуты данных. Не стесняйтесь редактировать код в соответствии с вашими потребностями.

$(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.com/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>