Question

我有这样的html代码，上面印有echo：

 <input id="58" readonly="readonly" class="cell_to_edit"  value="Accepted">
 <span id="58" class="toggle_status">
    <select class="status_change">
        <option>Accepted</option>
        <option>Waiting</option>
        <option>Canceled</option>
     </select>
  </span>

 <input id="59" readonly="readonly" class="cell_to_edit"  value="Canceled">
 <span id="59" class="toggle_status">
    <select class="status_change">
        <option>Accepted</option>
        <option>Waiting</option>
        <option>Canceled</option>
     </select>
  </span>

Jquery : 

$(function() {
        $('.cell_to_edit').on('click', function () {
                var inputID = $(this).attr('id');
                $(this).hide();
                    $("span[id=" + inputID + "]").show();
                    $("span[id=" + inputID + "]").attr("id",""+inputID+"");
                    $(".status_change").change(function() {
                        var selectIDforAjax = "id="+inputID;
                        console.log(selectIDforAjax);
                        $(this).hide();
                        $("input[id=" + inputID + "]").show();
                    });

            });
        });

我有这样的问题，当我打开所选的选项并隐藏输入时，一切都搞砸了。第二个打开时如何关闭选项？因为将来我会用Ajax将ID传递给php，以便在数据库中进行更改。

Answer 1

在你的情况下不需要id（如果你的html的结构与这里给出的相同）。您要定位的元素（input.cell_to_edit和.toggle_status）是下一个/上一个兄弟元素，因此请使用该关系，而不是使用ID来定位它们。

＆＃13;

$(function() {
  $('.cell_to_edit').on('click', function() {
    $(this).hide().next().show();
  });
  $(".status_change").change(function() {
    var $span = $(this).parent();
    $span.hide().prev().show();
    var id = $span.data('id');
    alert(id)
  });
});

＆＃13;

.toggle_status {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input readonly="readonly" class="cell_to_edit" value="Accepted" />
<span data-id="58" class="toggle_status">
    <select class="status_change">
        <option>Accepted</option>
        <option>Waiting</option>
        <option>Canceled</option>
    </select>
</span>

<input readonly="readonly" class="cell_to_edit" value="Canceled" />
<span data-id="59" class="toggle_status">
    <select class="status_change">
        <option>Accepted</option>
        <option>Waiting</option>
        <option>Canceled</option>
    </select>
</span>

＆＃13;

打开其他时关闭选项

1 个答案: