我有一个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>
尚未点击继续按钮时，DOM中会显示DIV
<div class="flexi-promotion-popup">
<div data-reactroot="">
</div>
</div>
当连续按钮被选中（覆盖重叠）时，DOM中就会显示DIV
<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 --> (<!-- /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 --> <!-- /react-text -->
<span>₹ 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,
<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 & Email ID
</div>
<div class="description"><!-- react-text: 15 -->Note: Entering mobile number & 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>
答案 0 :(得分：0)
尝试隐藏/显示继续按钮
$('button.yelbtn').click() {
$('button.yelbtn').hide();
$('button.btn.btn-indigo.skip-cnt-btn').show();
$('button.btn.btn-indigo.skip-cnt-btn').trigger('click');
...
}