Question

我不知道如何解决这个问题我有一个文件列表，当我点击编辑按钮时可见，当我点击保存时消失 问题是如何在不重新键入所有字段的jquery代码的情况下使其成为所有字段的动态 这是我的代码

非常感谢:)。

＆＃13;

$(document).ready(function() {

  $("#name-text, #name-btn-edit").hover(function() {
    $("#name-btn-edit").css("visibility", "visible");
  }, function() {
    $("#name-btn-edit").css("visibility", "hidden");
  });

  $('#name-btn-edit, #name-btn-ok').on(
    'click',
    function() {
      $('#name-btn-edit, #name-btn-ok').toggle();
      $('#name-text, #name-field').toggle();
    }
  );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="inputName" class="col-sm-2 control-label">Name :</label>
  <div class="col-sm-10">
    <div class="input-group">

      <div class="form-control" id="name-text">Tony hawk</div>

      <span class="input-group-btn" id="name-btn-edit" style="visibility: hidden">
                                        <button type="button" class="btn btn-default btn-flat"><i class="fa fa-pencil"></i>Edit</button></span>

      <input type="text" value="tony hawk" class="form-control" id="name-field" style="display: none">

      <span class="input-group-btn" id="name-btn-ok" style="display: none">
      <button type="button" class="btn btn-primary btn-flat"><i class="fa fa-check"></i> Save</button>
                                    </span>

    </div>
  </div>
</div>

＆＃13;

Answer 1

将id属性转换为类，如下所示：

<div class="form-control name-text">Tony hawk</div>

然后，更改您的jQuery以查找class而不是id，如下所示：

$(".name-text, .name-btn-edit").hover(function () {

另外，请记住，由于您正在使用类，因此查询类可以返回多个结果，因此您可以使用closest查找它们的父级，然后触发特定搜索，例如这样：

$(this).closest(".input-group").find(".name-btn-edit").css("visibility", "visible");

这将是工作代码：

＆＃13;

$(document).ready(function () {
    $(".name-text, .name-btn-edit").hover(function () {
        $(this).closest(".input-group").find(".name-btn-edit").css("visibility", "visible");
    }, function () {
        $(this).closest(".input-group").find(".name-btn-edit").css("visibility", "hidden");
    });
    $('.name-btn-edit, .name-btn-ok').on(
        'click',
        function () {
            $(this).closest('.input-group').find('.name-btn-edit, .name-btn-ok').toggle();
            $(this).closest('.input-group').find('.name-text, .name-field').toggle();
        }
    );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <label for="inputName" class="col-sm-2 control-label">Name :</label>
    <div class="col-sm-10">
        <div class="input-group">
            <div class="form-control name-text">Tony hawk</div>
            <span class="input-group-btn name-btn-edit" style="visibility:hidden">
                <button type="button" class="btn btn-default btn-flat">
                    <i class="fa fa-pencil"></i>
                    Edit
                </button>
            </span>
            <input type="text" value="tony hawk" class="form-control name-field" style="display:none">
            <span class="input-group-btn name-btn-ok" style="display: none">
                <button type="button" class="btn btn-primary btn-flat">
                    <i class="fa fa-check"></i>
                    Save
                </button>
            </span>
        </div>
    </div>
</div>

＆＃13;

在这里：https://jsfiddle.net/8fbt8aae/

Jquery进行切换并替换多个元素

1 个答案: