如何防止我的函数将多个按钮附加到一个元素？

Question

我有一组 li，我想要的是单击特定 li 以更改其背景颜色并在其中附加一个按钮。

 <ul>
 <li class=opt>hi</li>
  <li class=opt>hello</li>
   <li class=opt>how are you</li>
    <li class=opt>come on</li>
     <li class=opt>go out</li>
      <li class=opt>lets go</li>
 </ul>

这是我目前的代码，问题是点击后它在同一个 li 中附加了几个按钮。

    $('.opt').click(function(){


        button_click_me ="<button>click me</button>";


       $('li', $(this).css('background-color', '#F5F8FA').append(button_click_me).closest('ul')).not(this).hide();



    });

Answer 1

您可以通过$(this).find("button").length

检查点击的li是否有按钮

您可以这样做：

$(function() {
  $('ul>li').click(function() {

    //Add color and append button if unable to find a button
    if( !$(this).find("button").length ) $(this).css('background-color', '#F5F8FA').append("<button>click me</button>");

    //Hide all li except the clicked li
    $('ul>li').not(this).hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class=opt>hi</li>
  <li class=opt>hello</li>
  <li class=opt>how are you</li>
  <li class=opt>come on</li>
  <li class=opt>go out</li>
  <li class=opt>lets go</li>
</ul>

Answer 2

您必须检查是否已经有按钮。与其依赖 DOM 元素检查，这可能很脆弱，不如添加一个 class 您可以在后续点击时检查：

 $('.opt').click(function() {
   button_click_me = "<button>click me</button>";

   $(this).not('.has-button')
     .css('background-color', '#F5F8FA')
     .append(button_click_me)
     .addClass('has-button')
     .siblings().hide();
 });

Demo

如何防止我的函数将多个按钮附加到一个元素？

How can I prevent my function from appending more than one button to an element?

jquery

append

click

closest