禁用第二个元素集,一旦用户单击第一个元素集,然后启用第二个元素集。一旦用户点击第二个集合,然后启用
Proceed to payment
请参阅下面的链接,该链接演示了此功能。
jQuery(document).ready(function($) {
$('#mentor-package a').addClass("gray-out");
$('#mentor-final a').addClass("gray-out");
$('#mentor-choose .button').click(function() {
var mentor = $(this).data('mentor');
console.log(mentor);
$('#mentor-final .summary').attr('data-mentor', mentor);
$('#mentor-package a').removeClass("gray-out");
});
$('#mentor-package .button').click(function() {
var package = $(this).data('package');
console.log(package);
$('#mentor-final .summary').attr('data-package', package);
$('#mentor-final a').removeClass("gray-out");
});
$('.button').click(function() {
if ($('#mentor-final .summary').data('mentor') === 'john-smith' && $('#mentor-final .summary').data('package') === 'express') {
console.log('John Smith - express');
} else if ($('#mentor-final .summary').data('mentor') === 'john-smith' && $('#mentor-final .summary').data('package') === 'growth') {
console.log('John Smith - growth');
} else if ($('#mentor-final .summary').data('mentor') === 'john-smith' && $('#mentor-final .summary').data('package') === 'mentor') {
console.log('John Smith - mentor');
} else if ($('#mentor-final .summary').data('mentor') === 'john-smith' && $('#mentor-final .summary').data('package') === 'advanced') {
console.log('John Smith - advanced');
}
});
});
#mentor-choose {
display: flex;
flex-direction: column;
}
#mentor-package {
display: flex;
flex-direction: column;
}
.gray-out {
color: grey;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mentor-choose">
<a href="#" class="button green" data-mentor="john-smith">Select John Smith</a>
<a href="#" class="button green" data-mentor="jane-doe">Select Jane Doe</a>
</div>
<div id="mentor-package">
<a href="#" class="button green" data-package="express">Select Express</a>
<a href="#" class="button green" data-package="growth">Select Growth</a>
<a href="#" class="button green" data-package="mentor">Select Mentor</a>
<a href="#" class="button green" data-package="advanced">Select Advanced</a>
</div>
<div id="mentor-final">
<a href="#" class="summary button green">Proceed to Payment</a>
</div>
