Question

我坚持开发哪些用户点击了查看/隐藏按钮并提交表单。

具有最近兄弟的元素应插入＆＃34; display：none＆＃34;

我尝试过添加父＆gt;兄弟姐妹，但它总是在div类

的所有panel-body上添加css属性

＆＃13;

$(document).on('click', '#btnCreate', function() {

  var subject = $('#txtSubject').val();
  $(".panel").contents().unwrap();
  $(".panel-heading").css("display", "none");
  $(".payslip-label").css("display", "block");

  if ($("i", "button.close").hasClass("fa-eye-slash") == true) {

    $("button.close").parent().siblings().css("display", "none");

  }

  var body = $('#templateBody').html();

  $.ajax({
    url: myRoot + 'Template/AddTemplate',
    type: 'POST',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: JSON.stringify({
      htmlBody: body,
      txtSubject: subject
    }),
    beforeSend: function(e) {
      $('#overlay').show();
      $('#btnCreate').attr("disabled", "disabled");
      $('#btnCancel').attr("disabled", "disabled");
    },
    async: true,
    success: function(data) {
      $('#overlay').hide();

      console.log(data);

      location.reload();
    },
    error: function(err) {
      $('#overlay').hide();
      $('#btnSave').removeAttr("disabled", "disabled");
      $('#btnCancel').removeAttr("disabled", "disabled");
    }
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12" id="templateBody">
  <ul id="draggablePanelList" class="list-unstyled">
    <li class="panel panel-info">
      <div class="panel-heading" style="font-family: 'Roboto', sans-serif;">
        <button type="button" class="close" data-value="0" style="font-size: 18px;"><i class="fa fa-eye" aria-hidden="true"></i></button> Payroll Information
      </div>
      <div class="panel-body">
        <div class="payslip-label" style="position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; display: none;">
          <div style="font-family: 'Roboto', sans-serif; font-weight: 600; color: #5da0cd; text-transform: uppercase;">
            Payroll Information
            <div style="margin: 5px auto 20px auto; border-bottom: 2px solid #5DA0CD; display: block; width: 100%;"></div>
          </div>
        </div>
        <div style="clear: both; content: ' '; display: table;"></div>
        <div style="position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;">
          <table border="0" width="100%" style="font-family: 'Roboto', sans-serif;" cellspacing="0" cellpadding="0">
            <tbody>
              <tr>
                <td style="padding: 10px 0px 0px 0px;"><strong>Pay Period:</strong></td>
                <td style="padding: 10px 0px 0px 0px;">{pay_period}</td>
                <td style="padding: 10px 0px 0px 0px;"><strong>Account No:</strong></td>
                <td style="padding: 10px 0px 0px 0px;">{account_no}</td>
              </tr>
              <tr>
                <td style="padding: 10px 0px 0px 0px;"><strong>Pay Type:</strong></td>
                <td style="padding: 10px 0px 0px 0px;">{pay_type}</td>
                <td style="padding: 10px 0px 0px 0px;"><strong>Absent:</strong></td>
                <td style="padding: 10px 0px 0px 0px;">{absent}</td>
              </tr>
              <tr>
                <td style="padding: 10px 0px 0px 0px;"><strong>Rate:</strong></td>
                <td style="padding: 10px 0px 0px 0px;">{rate}</td>
                <td style="padding: 10px 0px 0px 0px;"><strong>Leave:</strong></td>
                <td style="padding: 10px 0px 0px 0px;">{leave}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div style="position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;"></div>
        <div style="clear: both; content: ' '; display: table;"></div>
        <div style="display: block; height: 20px;"></div>
      </div>
    </li>
    <li class="panel panel-info">
      <div class="panel-heading" style="font-family: 'Roboto', sans-serif;">
        <button type="button" class="close" data-value="1" style="font-size: 18px;"><i class="fa fa-eye" aria-hidden="true"></i></button> Employee Consent
      </div>
      <div class="panel-body" style="position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; text-align: center;">
        <p style="font-family: 'Roboto', sans-serif;">I acknowledge to have received from {Company_name} the amount stated below and have no further claims for services rendered.</p>
        <input type="text" class="signature" style="width: 30%;" />
        <br /> {Lastname}, {firstname}
      </div>
    </li>
    <li class="panel panel-info">
      <div class="panel-heading" style="font-family: 'Roboto', sans-serif;">
        <button type="button" class="close" data-value="0" style="font-size: 18px;"><i class="fa fa-eye" aria-hidden="true"></i></button> Employee Information
      </div>
      <div class="panel-body">
        <div class="payslip-label" style="position relative; min-height: 1px; padding-right: 15px; padding-left: 15px; display: none;">
          <div style="font-family: 'Roboto', sans-serif; font-weight: 600; color: #5da0cd; text-transform: uppercase;">
            Employee Information
            <div style="margin: 5px auto 20px auto; border-bottom: 2px solid #5DA0CD; display: block; top: 50%; width: 100%;"></div>
          </div>
        </div>
        <div style="clear: both; content: ' '; display: table;"></div>
        <div style="position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;">
          <table border="0" width="100%" style="font-family: 'Roboto', sans-serif;" cellspacing="0" cellpadding="0">
            <tbody>
              <tr>
                <td style="padding: 10px 0px 0px 0px;"><strong>Employee Number:</strong></td>
                <td style="padding: 10px 0px 0px 0px;">{employee_number}</td>
                <td style="padding: 10px 0px 0px 0px;"><strong>Date Hired:</strong></td>
                <td style="padding: 10px 0px 0px 0px;">{date_hired}</td>
              </tr>
              <tr>
                <td style="padding: 10px 0px 0px 0px;"><strong>Employee Name:</strong></td>
                <td style="padding: 10px 0px 0px 0px;">{employee_name}</td>
                <td style="padding: 10px 0px 0px 0px;"><strong>SSS ID:</strong></td>
                <td style="padding: 10px 0px 0px 0px;">{sss_id}</td>
              </tr>
              <tr>
                <td style="padding: 10px 0px 0px 0px;"><strong>Department Name:</strong></td>
                <td style="padding: 10px 0px 0px 0px;">{department_name}</td>
                <td style="padding: 10px 0px 0px 0px;"><strong>Pagibig ID:</strong></td>
                <td style="padding: 10px 0px 0px 0px;">{pagibig_id}</td>
              </tr>
              <tr>
                <td style="padding: 10px 0px 0px 0px;"><strong>Tax Code:</strong></td>
                <td style="padding: 10px 0px 0px 0px;">{tax_code}</td>
                <td style="padding: 10px 0px 0px 0px;"><strong>TIN:</strong></td>
                <td style="padding: 10px 0px 0px 0px;">{tin}</td>
              </tr>
            </tbody>
          </table>

        </div>
        <div style="clear: both; content: ' '; display: table;"></div>
        <div style="position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;"></div>
        <div style="clear: both; content: ' '; display: table;"></div>
        <div style="display: block; height: 10px;"></div>
      </div>
    </li>
  </ul>
</div>

＆＃13;

在if条件下我被困在如何在点击的显示/隐藏按钮的最近panel-body上添加css属性。

Answer 1

尝试

slack

Closest（）向后移动DOM树以找到具有该选择器的第一个元素。然后查找返回DOM树，找到该选择器的所有元素。 Hide（）执行在锡上说的内容！

Answer 2

使用addClass和removeClass jquery函数怎么样？

https://api.jquery.com/addclass/ https://api.jquery.com/removeclass/

您只需使用display：none定义一个新的CSS类;然后在你要隐藏的任何内容上添加addClass，并在单击按钮时删除实际的那个。

如果条件为真，则Jquery添加css属性

2 个答案: