我在一个具有特定数据属性的页面上有许多按钮。我使用jQuery动态检索与用户单击的按钮相关联的数据。
我还动态地将这个属性值添加到最终的“继续付款”按钮。
jQuery(document).ready(function($) {
$('#mentor-choose .button').click(function () {
var mentor = $(this).data('mentor');
console.log(mentor);
$('#mentor-final .summary').attr('data-mentor', mentor);
});
$('#mentor-package .button').click(function () {
var package = $(this).data('package');
console.log(package);
$('#mentor-final .summary').attr('data-package', package);
});
$('.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');
}
});
});
<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>
然后,我使用一个单独的click函数,根据检查自定义数据属性值的if/else if语句,动态调整“继续付款”ref属性(当前设置为console.log以进行调试)。
这是页面加载后的第一次循环。但是,如果用户单击另一个选项(即在第一次单击Growth之后单击Mentor),则最终的单击功能不会更新。
我认为这是因为第二个click函数需要等待第一个。我尝试了许多不同的选项,包括设置超时或更改为.on()单击事件。
任何帮助都将不胜感激!
