Question

发生了什么

如您所见，在单击“删除”按钮之前，“添加”按钮工作正常。单击“删除”按钮后，“添加”按钮保持相同的颜色。

我想要发生的事情 是针对“添加”按钮还原为旧颜色。

我认为这样做的原因是因为在我的jQuery中我改变了颜色，但是在点击结束后我再也没有改变它们。

如果有人可以帮助我，我真的很感激它！

我的代码

HTML 的

/*get rid of grey shadow when press on buttons*/
.btn.button-add, .btn.button-bullet, .btn.button-bullet:active, .btn.button-add:active, .btn.button-add:focus, 
.btn.button-bullet:focus {
    box-shadow: none;
  -webkit-box-shadow: none;
}

/*get rid of Boostrap default grey for buttons*/
.btn.button-add, .btn.button-bullet {
  background-color: transparent;

}

.btn.button-add:hover, #Done-Button:hover{
    background-color: #E5FFFB;
}

.glyphicon-plus-sign, .glyphicon-ok-sign{
    color: #02C8A7;
}

CSS

$(".worksheet-problems").on("click", ".button-add", function(){
    $(this).css("background-color", "#02C8A7");
    $(this).children(".glyphicon").css("color", "#E5FFFB");
});

的jQuery

$(".worksheet-problems").on("click", ".button-add", function () {
    var $row = $(this).closest('.row');
    var $wsProbRow = $row.clone(true);
    $wsProbRow.find("input[type='text'][name='Worksheet-Problem']").val("");
    $wsProbRow.insertAfter($row);
    $(this).css("background-color", "#02C8A7");
    $(this).children(".glyphicon").css("color", "#E5FFFB").delay(500).queue(function(){
        $(this).css("background-color", "transparent");
        $(this).children(".glyphicon").css("color", "#02C8A7");
    });
});

JSFiddle

更新

我意识到故障不是因为我点击了删除按钮。这是因为当我单击“添加”按钮时，我更改了“添加”按钮的颜色，并将其克隆为下一个“问题”行。

因此，当单击“删除”按钮时，这些答案会更改“添加”按钮的颜色，但我发现在克隆到下一行后，我需要更改“添加”按钮的内容。

是否有某种方法可以延迟将“添加”按钮颜色恢复半秒？我正在尝试使用延迟，但我认为我没有正确使用它，因为没有发生任何事情。

更新了jQuery

{{1}}

Updated JSFiddle

Answer 1

只需将删除按钮代码更新到下方，即可仅针对最后一行反转颜色更改。

$(".worksheet-problems").on("click", ".button-bullet", function() {
    if ($(".worksheet-problems").children().length > 1) {
      //reverse color changes to last row
      $(this).closest('.worksheet-problems .row').last().find(".button-add")
             .css("background-color", "")
             .children(".glyphicon").css("color", "");
      //remove current row
      $(this).closest('.row').remove();

    }
  });

<强>更新

现在您的问题更新后，我在下面的代码段中使用了您的问题＆amp;完整的例子。

$(document).ready(function() {
  // have the html reay with you & when needed insert into DOM
  var wsProbRow = $('.worksheet-problems .row')[0].outerHTML;

将添加功能更新到下面

 $(".worksheet-problems").on("click", ".button-add", function() {
    $(this).closest(".worksheet-problems").append($(wsProbRow));
  });

见下面的工作示例

＆＃13;

$(document).ready(function() {
  var wsProbRow = $('.worksheet-problems .row')[0].outerHTML;
  
  $(".worksheet-problems").on("mouseenter", ".form-group", function() {
    $(this).find(".button-add").fadeIn(100);
    if ($(".worksheet-problems").children().length > 1) {
      $(this).find(".button-bullet").children(".glyphicon").removeClass("glyphicon-one-fine-dot");
      $(this).find(".button-bullet").children(".glyphicon").addClass("glyphicon-minus-sign");
    }
  });
  $(".worksheet-problems").on("mouseleave", ".form-group", function() {
    $(this).find(".button-add").fadeOut(100);
    if ($(".worksheet-problems").children().length > 1) {
      $(this).find(".button-bullet").children(".glyphicon").removeClass("glyphicon-minus-sign");
      $(this).find(".button-bullet").children(".glyphicon").addClass("glyphicon-one-fine-dot");
    }
  });

  $(".worksheet-problems").on("mouseenter mouseleave", ".button-bullet", function() {
    if ($(".worksheet-problems").children().length > 1) {
      $(this).toggleClass("light-red-background");
    }
  });
  $(".worksheet-problems").on("click", ".button-add", function() {
    $(this).closest(".worksheet-problems").append($(wsProbRow));
  });

  $(".worksheet-problems").on("click", ".button-add", function() {
    $(this).css("background-color", "#02C8A7");
    $(this).children(".glyphicon").css("color", "#E5FFFB");
  });

  $(".worksheet-problems").on("click", ".button-bullet", function() {
    if ($(".worksheet-problems").children().length > 1) {
      
      $(this).closest('.row').remove();

    }
  });

  $(".worksheet-problems").on("click active focus", ".button-bullet", function() {
    if ($(".worksheet-problems").children().length > 1) {
      $(this).css("background-color", "#F53240");
      $(this).children(".glyphicon").css("color", "#FCC1C5");
    } else {
      $(this).css("background-color", "transparent");
    }
  });

})

＆＃13;

/*import custom font*/

@import 'https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900';
.container-fluid {
  background-color: #86E1D8;
}


/*Page*/

.container {
  margin-top: 50px;
  height: 100vh;
  background-color: white;
  font-family: 'Work Sans', sans-serif;
  /*Background shadow*/
  -webkit-box-shadow: 1px 1px 13px 3px rgba(155, 155, 155, 1);
  -moz-box-shadow: 1px 1px 13px 3px rgba(155, 155, 155, 1);
  box-shadow: 1px 1px 13px 3px rgba(155, 155, 155, 1);
}


/*remove header grey line*/

.page-header {
  border-bottom: none;
}


/*Get rid of that blue outline when input text*/


/*.form-control{
    border: none;
    border-color: #cccccc;
    -webkit-box-shadow: none;
    box-shadow: none;
}*/


/*Get rid of blue outline Chrome*/

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: none;
}

.btn {
  border: 0px solid transparent;
}


/*Buttons*/

.button-add {
  display: none;
}

#Done-Button {
  margin-right: 20px;
  background-color: white;
}


/*get rid of grey shadow when press on buttons*/

.btn.button-add,
.btn.button-bullet,
.btn.button-bullet:active,
.btn.button-add:active,
.btn.button-add:focus,
.btn.button-bullet:focus {
  box-shadow: none;
  -webkit-box-shadow: none;
}


/*get rid of Boostrap default grey for buttons*/

.btn.button-add,
.btn.button-bullet {
  background-color: transparent;
}

.btn.button-add:hover,
#Done-Button:hover {
  background-color: #E5FFFB;
}

.btn.light-red-background {
  background-color: #FCC1C5;
}

.glyphicon-minus-sign,
.glyphicon-plus-sign {
  font-size: 28px;
}

.glyphicon-minus-sign {
  color: #F53240;
}

.glyphicon-plus-sign,
.glyphicon-ok-sign {
  color: #02C8A7;
}

.glyphicon-ok-sign {
  font-size: 70px;
}


/*Circle icon*/

.glyphicon.glyphicon-one-fine-dot {
  margin-top: -1.4em;
  overflow: hidden;
}

.glyphicon.glyphicon-one-fine-dot:before {
  content: "\25cf";
  font-size: 3em;
}


/*Circular buttons*/

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 0px;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}

.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 25px;
}

.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}


/*Add borders when hover or click on input boxes*/

input[type="text"] {
  outline: none;
  box-shadow: none !important;
  border: 1px solid white;
  /*make the borders invisble by turning same color as background*/
}

input[type="text"]:hover,
input[type="text"]:focus {
  border: 1px solid #cccccc;
  border-radius: 8px;
}


/*Style input text boxes*/

input[type='text'][name='Worksheet-Name'] {
  font-size: 36px;
  margin-top: 20px;
  margin-left: 15px;
}

input[type='text'][name='Worksheet-Problem'] {
  font-size: 20px;
}


/*Change placeholder*/

input[type='text'][name='Worksheet-Name']::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-weight: 500;
  font-size: 36px;
}

input[type='text'][name='Worksheet-Name']::-moz-placeholder {
  /* Firefox 19+ */
  font-weight: 500;
  font-size: 36px;
}

input[type='text'][name='Worksheet-Name']:-ms-input-placeholder {
  /* IE 10+ */
  font-weight: 500;
  font-size: 36px;
}

input[type='text'][name='Worksheet-Name']:-moz-placeholder {
  /* Firefox 18- */
  font-weight: 500;
  font-size: 36px;
}


/*Change placeholder*/

input[type='text'][name='Worksheet-Problem']::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-weight: 400;
  font-size: 20px;
}

input[type='text'][name='Worksheet-Problem']::-moz-placeholder {
  /* Firefox 19+ */
  font-weight: 400;
  font-size: 20px;
}

input[type='text'][name='Worksheet-Problem']:-ms-input-placeholder {
  /* IE 10+ */
  font-weight: 400;
  font-size: 20px;
}

input[type='text'][name='Worksheet-Problem']:-moz-placeholder {
  /* Firefox 18- */
  font-weight: 400;
  font-size: 20px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
    <div class="container">
      <form>
        <div class="row page-header">
          <div class="col-xs-10">
            <div class="form-group">
              <input type="text" name="Worksheet-Name" class="form-control input-lg" placeholder="Worksheet Name..." aria-label="Write worksheet name here"> </div>
          </div>
        </div>
        <div class="worksheet-problems">
          <div class="row">
            <div class="col-lg-7">
              <div class="form-group">
                <div class="input-group input-group-lg worksheet-problem">
                  <div class="input-group-btn">
                    <button type="button" class="btn btn-default button-bullet"> <span class="glyphicon glyphicon-one-fine-dot" aria-hidden="true"></span> </button>
                  </div>
                  <input type="text" name="Worksheet-Problem" class="form-control" placeholder="Problem..." aria-label="Write worksheet problem here">
                  <div class="input-group-btn">
                    <button type="button" class="btn btn-default button-add" aria-label="Add"> <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="pull-right">
            <a id="Done-Button" href="Demo.html" type="button" class="btn btn-default btn-circle btn-xl"> <span class="glyphicon glyphicon-ok-sign"></span> </a>
          </div>
        </div>
      </form>
    </div>
  </div>

＆＃13;

Answer 2

我使用以下更改更新了您的代码：

添加了一个名为＆＃39; .button-selected＆＃39;选择按钮后按钮（所以我们可以跟踪选择了哪些按钮）

$(".worksheet-problems").on("click", ".button-add", function(){
     $(this).addClass('button-selected');
});

当＆＃39; .button-bullet＆＃39;已被选中，我删除了按钮选择的＆＃39;从上一行的按钮

$(".worksheet-problems").on("click", ".button-bullet", function () {
    var previousRow = $(this).closest('.row').prev();
    previousRow.find('.button-selected').removeClass('button-selected');

    if ($(".worksheet-problems").children().length > 1) {
        $(this).closest('.row').remove();
    }
});

我还添加了一些CSS来处理新的类添加＆＃39;按钮选择＆＃39;

.btn.button-add.button-selected{
  background-color: rgb(2, 200, 167);
}

.glyphicon-plus-sign{
  color: #02C8A7;
}

.button-selected .glyphicon-plus-sign{
  color: #E5FFFB;
}

以下是工作代码的更新小提琴

https://jsfiddle.net/iamnottony/q64280L4/4/

单击后如何更改CSS属性？

发生了什么

我的代码

更新

2 个答案: