时间戳

首页 > 解决方案 > 第一次单击按钮时触发重新单击/双击的动作

javascript - 第一次单击按钮时触发重新单击/双击的动作

问题描述

我有一个 HTML，这样当我点击“继续”按钮时，就会出现一个叠加层。该叠加层具有“跳过并继续”按钮。当我单击“跳过并继续”按钮时，会出现第二个叠加层，取代第一个叠加层。

我的期望是在单击继续按钮时显示第二个叠加层，第一个叠加层永远不会出现，并且应该在单击继续按钮时触发“跳过并继续”的动作。

我在下面编写了部分工作的代码。单击继续按钮不会触发任何操作，但是当我重新单击或双击继续按钮时，会出现第二个叠加层。我希望第二个叠加层出现在单击继续按钮的单次/第一次单击上。

$('button.yelbtn').click(function() {
  $('button.btn.btn-indigo.skip-cnt-btn').trigger('click');
  $('.flexi-promotion-popup').hide();
});

PS：

继续按钮的选择器：

$('button.yelbtn')

跳过和继续按钮的选择器：

$('button.btn.btn-indigo.skip-cnt-btn')

HTML 继续按钮：

<button id="continue-button" class="yelbtn">
    <span><!-- react-text: 40 -->Continue<!-- /react-text --><!-- react-text: 41 --> <!-- /react-text -->
        <i class="fa icon-chevron-right" aria-hidden="true">
        </i>
    </span>
</button>

未单击“继续”按钮时 DIV 出现在 DOM 中

<div class="flexi-promotion-popup">
    <div data-reactroot="">
    </div>
</div>

单击继续按钮时，DOM 中出现 DIV（FIRSY 覆盖）

<div class="flexi-promotion-popup">
    <div data-reactroot="" class="ReactModal__Overlay ReactModal__Overlay--after-open popup-overlay-desktop black upgrade-popup">
        <div class="ReactModal__Content ReactModal__Content--after-open popup-container-desktop modal-dialog upgrade-popup-ie" tabindex="-1" aria-label="Flexi-Promotion-Popup">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 id="myModalLabel">
                        <span class="f22">Add flexibility to your travel</span> 
                        <button type="button" class="closeBtn pull-right" data-dismiss="modal" aria-label="Close">
                            <i class="icon-close-stroke"></i>
                        </button>
                    </h4>
                 </div>
                 <div class="modal-body text-left">
                     <div class="title">
                         <span><!-- react-text: 12 -->BLR<!-- /react-text --><!-- react-text: 13 --> <!-- /react-text --></span>
                             <i class="icon-flight-right"></i>
                         <span><!-- react-text: 16 --> <!-- /react-text --><!-- react-text: 17 -->IXC<!-- /react-text --></span>
                         <span><!-- react-text: 19 --> &nbsp;(<!-- /react-text -->
                             <span>Saver Fare</span><!-- react-text: 21 -->)<!-- /react-text -->
                         </span>
                      </div>
                      <div class="media">
                          <div class="media-left">
                              <div class="pp-img text-center">
                                  <img src="/etc/designs/abc-reservation/clientlibs-react/images/popups/unlimited-changes.png" alt="">
                          </div>
                      </div>
                      <div class="media-body bg-flight text-left">
                          <div class="jumbo-text">
                              <span>Make unlimited changes to your booking at additional
                              </span>
                              <span><!-- react-text: 30 -->&nbsp;<!-- /react-text -->
                                  <span>₹&amp;nbsp;354</span><!-- react-text: 32 -->*<!-- /react-text -->
                              </span>
                              <div>
                                  <button class="btn btn-abc"><!-- react-text: 35 -->Add to trip<!-- /react-text --><!-- react-text: 36 --> <!-- /react-text -->
                                      <i class="icon-angle-right"></i>
                                  </button>
                                  <button type="button" class="btn btn-abc skip-cnt-btn ml20" data-dismiss="modal"><!-- react-text: 39 -->Skip and continue <!-- /react-text -->
                                      <i class="icon-angle-right"></i>
                                   </button>
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
               <div class="modal-footer">
                   <span>
                       <p>*Fare difference applies. For more details,&nbsp;
                           <a href="https://www.goabc.in/information/new-fare-types.html" target="_blank" adhocenable="false">Click here.</a>
                       </p>
                   </span>
               </div>
           </div>
       </div>
   </div>
   </div>

单击“跳过和继续”按钮时的 DIV：

<div class="ReactModalPortal">
    <div data-reactroot="" class="ReactModal__Overlay ReactModal__Overlay--after-open popup-overlay-desktop black">
        <div class="ReactModal__Content ReactModal__Content--after-open popup-container-desktop modal-password" tabindex="-1" aria-label="IndiGo" style="border: none; background: transparent;">
            <div class="modal-dialog login-wide gst-wrapper">
                <div class="modal-content indilogin">
                    <div class="modal-header">
                        <h4 class="modal-title text-left">
                            <img class="indigo-logo" src="/etc/designs/indigo-reservation/clientlibs-react/images/vector-icons/IndiGo-Airlines-Logo-White.svg" alt="IndiGo Airlines Logo">
                                <button class="closeBtn pull-right">
                                    <span class="icon-close-stroke" aria-hidden="true">
                                    </span>
                                </button>
                        </h4>
                    </div>
                    <div class="modal-body clearfix">
                        <form>
                            <div class="indilogin-wrappertop">
                                <div class="title_small">Passenger Mobile Number &amp; Email ID
                                </div>
                                <div class="description"><!-- react-text: 15 -->Note: Entering mobile number &amp; email ID is mandatory to proceed for your booking.<!-- /react-text --><!-- react-text: 16 --> <!-- /react-text --><br><!-- react-text: 18 -->*All notifications will be sent to this mobile number and email address.<!-- /react-text -->
                                </div>
                                <div class="form-table">
                                    <div class="form-cell clearfix">
                                        <div class="telip-code">
                                            <div>
                                                <div name="mobileCountryCode" role="combobox" aria-owns="rw_1__listbox" aria-expanded="false" aria-haspopup="true" aria-busy="false" aria-live="polite" aria-autocomplete="list" aria-disabled="false" aria-readonly="false" tabindex="0" class="rw-dropdownlist rw-widget">
                                                    <span tabindex="-1" title="open dropdown" aria-label="open dropdown" class="rw-dropdownlist-picker rw-select rw-btn">
                                                        <span aria-hidden="true" class="rw-i rw-i-caret-down">
                                                        </span>
                                                    </span>
                                                    <div class="rw-input">
                                                        <div>
                                                            <span class="iti-flag in">
                                                            </span>
                                                            <div class="selected-dial-code"><!-- react-text: 30 -->+<!-- /react-text --><!-- react-text: 31 -->91<!-- /react-text -->
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="telip-num">
                                            <div><input type="tel" name="mobileNum" value="" placeholder="Enter Mobile No." class="form-control indilogin-wrappertop_mob">
                                            </div>
                                            <div class="format">e.g (89687xxxxx)
                                            </div>
                                            </div>
                                        </div>
                                    <div class="form-cell">
                                    <div>
                                    <input type="email" name="emailId" value="" placeholder="Email Id" class="form-control indilogin-wrappertop_email">
                                    </div>
                                <div class="format">e.g (xxx@gmail.com)
                                </div>
                                </div>
                                </div>
                                <div class="gstSwitch text-left">
                                <label class="gstSwitch-switch">
                                    <input type="checkbox" value="on">
                                        <div class="slider round">
                                        </div>
                                </label>
                                <span class="gstSwitch-switch_label">GST Information (optional)
                                </span>
                                </div>
                                <div class="text-center">
                                <button type="submit" class="btn btn-primary btn-lg btn-block signin-btn btn-nxt">Next
                                </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

标签： javascriptjqueryreactjs

解决方案

尝试隐藏/显示继续按钮

$('button.yelbtn').click() {
    $('button.yelbtn').hide();
    $('button.btn.btn-indigo.skip-cnt-btn').show();
    $('button.btn.btn-indigo.skip-cnt-btn').trigger('click');
    ...
 }

推荐阅读