Question

我需要使用jquery对下拉列表中的项目执行编辑和删除操作。为了编辑，我使用了以下编码

$(".imgE").click(function()
            {   
                var value = $(this).siblings(".ename").text()
                $(this).siblings(".ename").hide();
                $(this).siblings(".edit").show().val(value).focus();
           }
$(".edit").focusout(function()
                    {
                        $(this).hide().siblings(".ename").show().text($(this).val());
                    });

并删除我使用以下编码

$(".imgD").click(function()
        {   
            $(this).parent().parent().remove();

        });

我无法编辑项目

Answer 1

＆＃13;

<!DOCTYPE HTML>
<html>

<head>
  <script src="jquery.js"></script>

  <script>
    $(document).ready(function() {
      $(".imgE").click(function() {
        var value = $(this).siblings(".ename").text()
        $(this).siblings(".ename").hide();
        $(this).siblings(".edit").show().val(value).focus();
      });
      $(".edit").focusout(function() {
        $(this).hide().siblings(".ename").show().text($(this).val());
      });
      $(".imgD").click(function() {
        $(this).parent().remove();
      });
    });
  </script>
  <style type="text/css">
    .imgE,
    .imgD {
      height: 20px;
      width: 20px;
      padding: 1px;
    }
    li {
      width: 100%;
    }
    .ename,
    .edit {
      display: inline-block;
      width: 70%;
    }
    .edit {
      display: none;
    }
  </style>

</head>

<body>
  <ul>
    <li><span class="ename">ITEM1</span>
      <input class="edit" value="ITEM1" />
      <img src="edit.png" class="imgE" />
      <img src="delete.png" class="imgD">
    </li>
    <li><span class="ename">ITEM1 </span>
      <input class="edit" value="ITEM1" />
      <img src="edit.png" class="imgE" />
      <img src="delete.png" class="imgD">
    </li>
    <li><span class="ename">ITEM1</span> 
      <input class="edit" value="ITEM1" />
      <img src="edit.png" class="imgE" />
      <img src="delete.png" class="imgD">
    </li>
    <li><span class="ename">ITEM1 </span>
      <input class="edit" value="ITEM1" />
      <img src="edit.png" class="imgE" />
      <img src="delete.png" class="imgD">
    </li>
  </ul>
  </div>
</body>

</html>

＆＃13;

<!DOCTYPE HTML>
<html>

<head>
  <script src="jquery.js"></script>
  <script src="https://google-codeettify.googlecode.com/svn/loader/run_prettify.js"></script>
  <script>
    $(document).ready(function() {
      $(".imgE").click(function() {
        var value = $(this).siblings(".ename").text()
        $(this).siblings(".ename").hide();
        $(this).siblings(".edit").show().val(value).focus();
      });
      $(".edit").focusout(function() {
        $(this).hide().siblings(".ename").show().text($(this).val());
      });
      $(".imgD").click(function() {
        $(this).parent().remove();
      });
    });
  </script>
  <style type="text/css">
    .imgE,
    .imgD {
      height: 20px;
      width: 20px;
      padding: 1px;
    }
    li {
      width: 100%;
    }
    .ename,
    .edit {
      display: inline-block;
      width: 70%;
    }
    .edit {
      display: none;
    }
  </style>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
</head>

<body>
  <ul>
    <li><span class="ename">ITEM1</span>
      <input class="edit" value="ITEM1" />
      <img src="edit.png" class="imgE" />
      <img src="delete.png" class="imgD">
    </li>
    <li><span class="ename">ITEM1 </span>
      <input class="edit" value="ITEM1" />
      <img src="edit.png" class="imgE" />
      <img src="delete.png" class="imgD">
    </li>
    <li><span class="ename">ITEM1</span> 
      <input class="edit" value="ITEM1" />
      <img src="edit.png" class="imgE" />
      <img src="delete.png" class="imgD">
    </li>
    <li><span class="ename">ITEM1 </span>
      <input class="edit" value="ITEM1" />
      <img src="edit.png" class="imgE" />
      <img src="delete.png" class="imgD">
    </li>
  </ul>
  </div>
</body>

</html>

＆＃13;

使用jquery在DropDownList中编辑或删除项目

1 个答案: