jQuery prev next elements

Question

我在jQuery代码中的问题。我有这个代码jsFiddle。

$(document).ready(function(){
  $("#clickinput1").click(function (evt) {
     $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
  });
});

在单击按钮之前，输入被禁用并具有深色背景。我需要，当单击按钮输入启用(这项工作(并且背景更改为白色或无。我做不到。请帮忙(

Answer 1

这可以简单地使用.css("background-color","white")来完成，例如：

$(this).hide().prev("input[disabled]").prop("disabled", false).css("background-color","white").focus();

希望这有帮助。

$(document).ready(function() {
  $("#clickinput1").click(function(evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).css("background-color", "white").focus();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="customername" class="input" value="" disabled />
<div style="float:right;cursor:pointer;margin:2px 0 0 0px;" id="clickinput1">
  <img src="https://cdn4.iconfinder.com/data/icons/simplicio/128x128/document_edit.png" />button
</div>

Answer 2

你给 css 作为$("#white").css("background-color:#fff"); .这不是在jquery中定义css的正确方法。应该是$("#white").css("background-color","#fff");.另一件事是你没有给 id 作为任何元素的white。更改所有这些将解决您的问题。

$(document).ready(function() {
  $("#clickinput1").click(function(evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
    $("#white").css("background-color", "#fff");
  });
});

.input {
  border: 0px;
  outline: none;
  background: #ccc;
  height: 20px;
  width: 250px;
  font: 18px Calibri;
  margin-top: 1px;
}
body {
  background-color: #006699;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="customername" class="input" value="" id="white" disabled />
<div style="float:right;cursor:pointer;margin:2px 0 0 0px;" id="clickinput1"><img src="img/edit.png" />button</div>

即使我们不需要定义任何 id。这可以简单地像这样完成

$(document).ready(function() {
  $("#clickinput1").click(function(evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus().css("background-color", "#fff");
   
  });
});

.input {
  border: 0px;
  outline: none;
  background: #ccc;
  height: 20px;
  width: 250px;
  font: 18px Calibri;
  margin-top: 1px;
}
body {
  background-color: #006699;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="customername" class="input" value="" id="white" disabled />
<div style="float:right;cursor:pointer;margin:2px 0 0 0px;" id="clickinput1"><img src="img/edit.png" />button</div>

Answer 3

$(document).ready(function(){
    $("#clickinput1").click(function (evt) {
        $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
        $(".input").css("background-color", "white");
    });
});