jQuery问题 - 如何只用一个按钮执行两个操作

时间：2017-05-11 08:26:59

标签： jquery

我目前有两个按钮。第一个按钮显示div。第二个按钮显示第二个div。

以下是codepen

的链接

...这是我目前的jQuery ...... 

$(function(){
  $('#first').click(function () {
      $('.val').delay(500).slideDown(); 
  });

 $('#second').click(function () {
$('.val2').prependTo('.applied').delay(500).slideDown(400, function(){
        $('.total').html('£104.00');
      });
  });
});

我想要做的是只用一个按钮显示两个div。因此用户可以选择按钮来显示第一个div。然后，当他们再次按下相同的按钮时，它将显示第二个div。我想我可能需要使用“if”声明＆＃39;要说当前是否显示，然后显示第二个，但我的代码似乎不正确。

8 个答案:

答案 0 :(得分：2)

如果您设置某些内容以“向下滑动”，如果更改其可见性属性:) 

if ($('.second').is(':visible'))
{
     //show first
}
else
{
   //show second
}

第二次点击后，两者都可见:)在你的情况下：

$('#first').click(function () {

    if($('.val2').is(':visible'))
         $('.val').delay(500).slideDown(); 
    else    
        $('.val2').prependTo('.applied').delay(500).slideDown(400, 
           function(){
                $('.total').html('£104.00');
           });   

});

答案 1 :(得分：1)

使用jQuery检查元素的可见性可能很棘手。但是，您可以使用value属性来存储状态。

<button id="button" value="none">Click Me</button>

和脚本：

$('#button').click(function(){
    var $this = $(this);
    var state = $this.val();

    if (state = 'none'){
        //do first action
        $this.val('first');
    else if (state = 'first'){
        //do second action
        $this.val('second');
    else{
        //reset maybe?
        $this.val('none');
    }
});

或者您可以使用switch语句或类似命令来管理更多状态

答案 2 :(得分：1)

  

没有if语句

$('#first').one("click",function () {
    $('.val').delay(500).slideDown();	
    bind()
 });


var bind=function(){
  $('#first').one("click",function () {
  $('.val2')
      .prependTo('.applied')
      .delay(500)
      .slideDown(400,function(){
         $('.total').html('£104.00');
      });
  });
  
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: sans-serif;
	font-size: 16px;
	color: #5c5c5c;
}

.main {
	max-width: 375px;
  margin:16px;
}
button {
  padding:16px;
  border-radius:2px;
  border:0;
  background:seagreen;
  color:white;
  font-size:16px;
  cursor:pointer;
  margin-bottom:16px;
}
.validation{
	display: none;
	overflow: hidden;
	margin-bottom: 16px;
	margin-top: 8px;
} 

.validation.val2 {
	margin-bottom: 0;
}

.validation p {
	float: left;
}

.validation span {
	float: right;
}

.remaining {
	clear: both;
	border-top: 1px solid #ccc;
	padding-top: 8px;
	margin-top: 32px;
	font-weight: bold;
	overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <button id="first">First</button>

		<div class="applied">
      <div class="validation val">
				<p>4537 3728 3273 3284 328</p>
				<span>- £40.00</span>
				<div class="remaining">
					<p>Remaining to pay</p>
					<span class="total">£119.00</span>
					
				</div>
			</div>
			<div class="validation val2">
				<p>4537 3728 3273 3284 328</p>
				<span>- £15.00</span>
			</div>
		</div>
</div>

答案 3 :(得分：0)

只需检查此snipet中的标记即可。

＆＃13;
＆＃13; 
$(function(){
  var flag = false;
  $('#first').click(function () {
    
    if(flag){      $('.val2').prependTo('.applied').delay(500).slideDown(400, function(){
		    $('.total').html('£104.00');
      return;
		  });
  }
    flag = true;
  	  $('.val').delay(500).slideDown();	
  });
    });
＆＃13; 
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: sans-serif;
	font-size: 16px;
	color: #5c5c5c;
}

.main {
	max-width: 375px;
  margin:16px;
}
button {
  padding:16px;
  border-radius:2px;
  border:0;
  background:seagreen;
  color:white;
  font-size:16px;
  cursor:pointer;
  margin-bottom:16px;
}
.validation{
	display: none;
	overflow: hidden;
	margin-bottom: 16px;
	margin-top: 8px;
} 

.validation.val2 {
	margin-bottom: 0;
}

.validation p {
	float: left;
}

.validation span {
	float: right;
}

.remaining {
	clear: both;
	border-top: 1px solid #ccc;
	padding-top: 8px;
	margin-top: 32px;
	font-weight: bold;
	overflow: hidden;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="main">
    <button id="first">First</button> 
		<div class="applied">
      <div class="validation val">
				<p>4537 3728 3273 3284 328</p>
				<span>- £40.00</span>
				<div class="remaining">
					<p>Remaining to pay</p>
					<span class="total">£119.00</span>
					
				</div>
			</div>
			<div class="validation val2">
				<p>4537 3728 3273 3284 328</p>
				<span>- £15.00</span>
			</div>
		</div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

您可以设置一个变量来跟踪用户是否已经点击过一次。

https://codepen.io/anon/pen/KmoMQG 

var clicked = false;
$(function(){
    $('#button').click(function () {
        if (!clicked) {
            $('.val').delay(500).slideDown();
            clicked = true;
        } else {
            $('.val2').prependTo('.applied').delay(500).slideDown(400, function(){
                $('.total').html('£104.00');
            });
        }
    });
});

答案 5 :(得分：0)

我已经更新了您的codepen（显然将其保存为匿名） https://codepen.io/anon/pen/oWqLox

我所做的是将点击功能分成他们自己的功能。

添加了一个计数整数类型变量，并在click函数中添加了if check，每次都会增加计数。 （最大数字检查会将计数设置为-1，因此当再次点击计数++增量时，变量默认为0）。

＆＃13;
＆＃13; 
var firstClick = function(){
    $('.val').delay(500).slideDown();	
};
var secondClick = function(){    $('.val2').prependTo('.applied').delay(500).slideDown(400, function(){
		    $('.total').html('£104.00');
		  });
};

$(function(){
  var count = 0;
  
  $('#first').click(function () {
		  if(count === 0)
        {
          firstClick();
        }
    if(count === 1){
      secondClick();   
      count = -1;
    }
    
    count++;
  });

});
＆＃13;
＆＃13;
＆＃13;

答案 6 :(得分：0)

在此处，设置变量以跟踪按钮点击事件。

var i=1;
$(function(){
 $('#first').click(function () {
    if(i==1){
      $('.val').delay(500).slideDown(); 
      i=2;
      }
    else if(i==2)  {
         $('.val2').prependTo('.applied').delay(500).slideDown(400, function(){
        $('.total').html('£104.00');
      });   
    }
});
});

答案 7 :(得分：0)

你很健康。尝试运行此代码段

＆＃13;
＆＃13; 
$(function() {

  $('#first').click(function() {
    if ($('.val').is(':visible')) {
      $('.val2').prependTo('.applied').delay(500).slideDown(400, function() {
        $('.total').html('£104.00');
      });
    } else {
      $('.val').delay(500).slideDown();
    }

  });
});
＆＃13; 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  font-size: 16px;
  color: #5c5c5c;
}

.main {
  max-width: 375px;
  margin: 16px;
}

button {
  padding: 16px;
  border-radius: 2px;
  border: 0;
  background: seagreen;
  color: white;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 16px;
}

.validation {
  display: none;
  overflow: hidden;
  margin-bottom: 16px;
  margin-top: 8px;
}

.validation.val2 {
  margin-bottom: 0;
}

.validation p {
  float: left;
}

.validation span {
  float: right;
}

.remaining {
  clear: both;
  border-top: 1px solid #ccc;
  padding-top: 8px;
  margin-top: 32px;
  font-weight: bold;
  overflow: hidden;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <button id="first">Single</button>
  <div class="applied">
    <div class="validation val">
      <p>4537 3728 3273 3284 328</p>
      <span>- £40.00</span>
      <div class="remaining">
        <p>Remaining to pay</p>
        <span class="total">£119.00</span>

      </div>
    </div>
    <div class="validation val2">
      <p>4537 3728 3273 3284 328</p>
      <span>- £15.00</span>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题