在第一个完成后运行第二个jQuery click函数

时间：2019-02-27 07:02:01

标签： jquery html

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

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

这在页面加载后的第一轮工作。但是，如果用户单击其他选项（例如，先单击“增长”后的“导师”），则最终点击功能不会更新。

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

任何帮助将不胜感激！

2 个答案:

答案 0 :(得分：0)

禁用第二个元素集，一旦用户单击第一个元素集，然后启用第二个元素集。用户点击第二组按钮后，启用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>

如果这不是您想要的，请告诉我。我将尝试通过您的预期用例。

答案 1 :(得分：0)

我无法解决问题中的所有内容，下面的演示使用一个对象来存储data-*属性的选定值。

演示

$(function() {
  var config = new Map([
    ['mentor', null],
    ['profile', null],
    ['image', null],
    ['package', null],
    ['payment', 0],
    ['url', null]
  ]);

  function view(config) {
    for (let [key, value] of config) {
      if (key === undefined) {
        break;
      }
      console.log(`${key}: ${value}`);
    }
  }

  $('.mentor').on('click', function(e) {
    $('.mentor').each(function() {
      $(this).addClass('disabled');
    });
    $(this).removeClass('disabled');

    var mentor = $(this).data('mentor');
    var profile = $(this).data('profile');
    var image = $(this).data('image');
    config.set('mentor', mentor);
    config.set('profile', profile);
    config.set('image', image);

    $('.image img').attr('src', $(this).data('image'));
    $('.packages').removeClass('disabled');
    $('.final').removeClass('disabled');
    console.log(view(config))
  });

  $('.package').on('click', function() {
    $('.package').each(function() {
      $(this).removeClass('active');
    });
    $(this).toggleClass('active');

    var package = $(this).data('package');
    var payment = parseFloat($(this).val());
    var url = $(this).data('url');
    config.set('package', package);
    config.set('payment', payment);
    config.set('url', url);

    $('#total').val(`$${payment.toFixed(2)}`);
    $('.summary').attr('href', `${config.get('url')}${config.get('profile')}`);
    console.log(view(config));
  });

});
html,
body {
  height: 100%;
  width: 100%;
  font: 400 16px/1.25 Consolas;
}

fieldset {
  width: fit-content;
  border-radius: 6px
}

.mentors {
  display: table;
}

.mentors button.button.mentor {
  display: table-cell;
}

figure.image {
  display: block;
  margin: 0 auto;
}

.image img {
  width: 90px;
  min-height: 90px;
  display: block;
  margin: 0 auto;
  border: 3px inset grey
}

.button {
  display: inline-block;
  border: 1px solid green;
  margin: 5px 2.5px;
  padding: 3px 5px;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  background: none;
}

.active {
  background: black;
  color: white;
}

.disabled {
  opacity: 0.4;
  cursor: default;
}

.summary {
  text-align: center;
}

#total {
  width: 118px;
  display: inline-block;
}

label {
  display: inline-block;
  margin-left: 20px;
}

.as-console-wrapper {
  width: 200px;
  min-height: 100%;
  margin-left: 65%;
}

.as-console-row.as-console-row::after {
  content: '';
  padding: 0;
  margin: 0;
  border: 0;
  width: 0;
}
<fieldset class='mentors'>
  <legend>Pick a Mentor</legend>
  <button class="mentor button" data-mentor="john-smith" data-profile='#John%20Smith' data-image='https://www.eikonphoto.com/wp-content/uploads/2017/03/male-headshot-e1515783468636.jpg'>John Smith</button>
  <button class="mentor button" data-mentor="jane-doe" data-profile='#Jane%20Doe' data-image='https://www.eikonphoto.com/wp-content/uploads/2016/07/professional-headshots-in-washington-dc-e1473098078630.jpg'>Jane Doe</button>
  <figure class='image'>
    <img src='https://www.computerhope.com/jargon/b/black.jpg' width='90px' height='90px'>
  </figure>
</fieldset>

<fieldset class='packages disabled'>
  <legend>Select Courses</legend>
  <button class="package button" data-package="express" data-url='https://example.com/exp.html' value='19.99'>Express</button>
  <button class="package button" data-package="growth" data-url='https://example.com/grw.html' value='29.99'>Growth</button>
  <button class="package button" data-package="mentor" data-url='https://example.com/mtr.html' value='49.99'>Mentor</button>
  <button class="package button" data-package="advanced" data-url='https://example.com/adv.html' value='74.99'>Advanced</button>
</fieldset>

<fieldset class='final disabled'>
  <a href='#/' class="summary button">Proceed<br>to<br>Payment</a>
  <label>Total: </label>
  <output id='total'></output>
</fieldset>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

相关问题
最新问题