jquery - 在第一个完成后运行第二个 jQuery 点击函数

Question

我在具有特定数据属性的页面上有许多按钮。我正在使用 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>

然后，我使用一个单独的单击函数来动态调整“继续付款”href 属性（当前设置为简单的 console.log 进行调试），基于检查自定义数据属性值的 if/else if 语句。

这在页面加载后第一次有效。但是如果用户点击了不同的选项（即第一次点击成长后的导师），最终点击功能不会更新。

我认为这是因为第二次点击功能需要等待第一次。我尝试了许多不同的选项，包括设置超时或更改为 .on() 点击事件。

任何帮助将不胜感激！

标签： jqueryhtml

Answer 1

保持禁用第二组元素，一旦用户单击第一组元素，然后启用第二组。一旦用户点击 2nd set 然后启用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>

如果这不是你想要的，请告诉我。我将尝试为您提供预期的用例通行证。