javascript - 单击“追加”按钮，然后再次单击“返回”。？

Question

无法附加功能性编写的代码。 就像如果单击一个按钮，它将禁用并附加到 div，如果再次单击 div 内部，它将隐藏并再次启用父按钮。

逻辑正在使用比较innerHtml值。现在问题来了，比如具有相同的innerHtml 值。 请帮忙。

Array.from(document.querySelectorAll('.shadowbutton')).forEach(
(button)=>{
    button.addEventListener("click", function(e) {
        let text = e.target.innerHTML;
        let text1 = e.target.innerText;
    console.log(button)
    backbutton();
        this.disabled = true;
        $(this).addClass('disable');
        $('<button class="shadowbutton">' + text + "</button>").appendTo(dottedbox);
    })
}
)


function backbutton() {
    setTimeout(()=>{
        let dbutton = document.querySelectorAll('.dotted-box .shadowbutton');
        let parent = document.querySelectorAll('.dotted-box');
        if ( $(parent).children().length > 0 ) {
            dbutton.forEach(
                (button)=>{
                    button.addEventListener("click", (e)=> {
            console.log(button)
                        let parent = e.target.parentElement;
                        let parentdiv = document.querySelectorAll('.disable');
                        let dgfg = e.target
                        $(dgfg).removeAttr('disabled');
                        parentdiv.forEach(
                            (button)=>{
                                if(e.target.innerHTML == button.innerHTML){
                                    $(button).first().removeAttr('disabled');
                                    $(button).first().removeClass('disable');
                                }
                                else{
                                    //console.log(button)
                                }
                            }
                        )
                        parent.removeChild(e.target);
                    })
                }
            )
    }   
    },100)
}

问题是单击

时同时启用两个

按钮。它应该只启用第一个按钮。 Fiddle

Answer 1

您可以将当前单击的按钮存储在新创建的按钮中作为引用变量，并且您可以使用 event.target 获得相同的按钮新创建的按钮单击

演示

let dottedbox = document.querySelector('.dotted-box');

Array.from(document.querySelectorAll('.shadowbutton')).forEach(button => {button.addEventListener("click",onButtonClick)})

function onButtonClick(e) {

  let text = e.target.innerHTML;
  this.disabled = true;
  $(this).addClass('disable');
  let btn = $('<button class="shadowbutton">' + text + "</button>");
  btn.on("click", (e) => {
    let parent = e.target.parentElement;
    let parentdiv = document.querySelectorAll('.disable');
    let buttton = $(e.target.pBtn);
    //console.log(e.target)
    buttton.removeAttr('disabled');
    buttton.removeClass('disable');
    e.target.remove();
  });
  btn[0].pBtn = e.target;
  btn.appendTo(dottedbox);
}

.dotted-box {
  border: 1px solid #cdcdcd;
  min-height: 70px;
  margin: 2rem 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="event">
  <button class="shadowbutton">&lt;p&gt;</button>
  <button class="shadowbutton">&lt;/p&gt;</button>
  <button class="shadowbutton">&lt;/p&gt;</button>
  <button class="shadowbutton">&lt;p&gt;</button>
  <button class="shadowbutton">Hi all.!</button>
  <button class="shadowbutton">Hello all.!</button>
</div>
<div class="dotted-box">
</div>

---

您也可以用更少的代码实现与使用 jQuery 相同的效果

演示

$('.shadowbutton').on('click', function() {
  let button = $(this);
  button.prop('disabled', true).addClass('disable');
  let newbtn = $(`<button class="shadowbutton">${button.html()}</button>`);
  newbtn[0].pBtn = this;
  newbtn.appendTo($('.dotted-box')).on("click",newButtonClick);
});

function newButtonClick() {
  let button = $(this);
  let pButtton = $(button[0].pBtn);
  pButtton.prop('disabled',false).removeClass('disable');
  button.remove();
}

.dotted-box {
  border: 1px solid #cdcdcd;
  min-height: 70px;
  margin: 2rem 0;

}
.shadowbutton{
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="event">
  <button class="shadowbutton">&lt;p&gt;</button>
  <button class="shadowbutton">&lt;/p&gt;</button>
  <button class="shadowbutton">&lt;/p&gt;</button>
  <button class="shadowbutton">&lt;p&gt;</button>
  <button class="shadowbutton">Hi all.!</button>
  <button class="shadowbutton">Hello all.!</button>
</div>
<div class="dotted-box">
</div>