其他打开时关闭选项 - javascript

我有这样的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,以在数据库中进行更改。

参考方案

如果您的html的结构与此处给出的结构相同,则无需输入id。要定位的元素(input.cell_to_edit.toggle_status)是下一个/上一个兄弟元素,因此请使用该关系,而不要使用ID定位它们。

$(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)
  });
});

.toggle_status {
  display: none;
}

<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>

在PHP文件中调用javascript函数并在加载HTML文件之后? - javascript

我需要在我的php中调用js函数,但无法正常工作。有人可以告诉我我在做什么错吗?我该如何轻松地做到这一点?谢谢!我有三个文件:  mail.php负责发送$ _POST的内容(工作正常)。我调用我的javascript函数来切换模式,具体取决于邮件是否已发送。 <? ... $response = $sendgrid->send($email);…

如何使用PHP从动态输入字段捕获数组值? - javascript

我正在编写一个在线时间跟踪网页,允许用户将学习时间输入该系统。用户将首先输入名称,然后根据日期输入学习时间。一天中可能会有多个学习时间。以下是我第一页的编码,<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"…

使用php重新加载内容 - javascript

在对网站进行编程时,我以前使用过此代码,它可以完美工作,但是现在当我想使用一些Flash部件时,每次单击链接时,它都会重新加载所有网站。源代码: <!DOCTYPE html> <html> <head> <title>Hot King Staff</title> <meta charset=…

用jQuery填充模式形式 - javascript

我正在将订单表从数据库绘制到datatables(jquery插件)中。我要在每笔最后一笔交易或每笔交易中增加付款。问题是,如何获取单击添加付款按钮以添加付款的行的订单ID。其次,当点击addpayment时,它会弹出一个带有字段或订单号的模态表单。我想用在td中找到的订单ID填充该字段,并使其不可编辑或隐藏,但在提交模态表单时将其发布到服务器。表格和模式表…

选择后显示输入元素 - javascript

我有一个表格,其中取决于用户的选择,输入元素是否可见。实际上,用户正在以另一种形式设置已定义的合作伙伴类型,并且如果选中该元素,则允许在该类型的合作伙伴上可见的元素类型1将显示以下元素:<input type="text" id="partner" name="partner" class=&…