Question

我有一组li s，我想要的是一旦我点击一个特定的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元素检查，可能会添加一个类，您可以在后续点击中检查它：

 $('.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

如何防止我的函数向元素添加多个按钮？

2 个答案: