jQuery問題 - 如何僅用一個按鈕執行兩個動作

Question

我目前有兩個按鈕。第一個按鈕顯示一個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語句'來表示當前是否顯示，然後顯示第二個，但我的代碼似乎不正確。

Answer 1

如果你設置的東西「滑下」如果改變其可見性屬性:)

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'); 
      }); 

}); 

Answer 2

這是簡單的你只需要檢查一下這個snipet的標誌。

$(function(){ 
 
    var flag = false; 
 
    $('#first').click(function() { 
 
    
 
    if(flag){  $('.val2').prependTo('.applied').delay(500).slideDown(400, function(){ 
 
\t \t  $('.total').html('£104.00'); 
 
     return; 
 
\t \t }); 
 
    } 
 
    flag = true; 
 
    \t $('.val').delay(500).slideDown(); \t 
 
    }); 
 
    });

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t box-sizing: border-box; 
 
} 
 

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

 
.main { 
 
\t 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{ 
 
\t display: none; 
 
\t overflow: hidden; 
 
\t margin-bottom: 16px; 
 
\t margin-top: 8px; 
 
} 
 

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

 
.validation p { 
 
\t float: left; 
 
} 
 

 
.validation span { 
 
\t float: right; 
 
} 
 

 
.remaining { 
 
\t clear: both; 
 
\t border-top: 1px solid #ccc; 
 
\t padding-top: 8px; 
 
\t margin-top: 32px; 
 
\t font-weight: bold; 
 
\t overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <button id="first">First</button> 
 
\t \t <div class="applied"> 
 
     <div class="validation val"> 
 
\t \t \t \t <p>4537 3728 3273 3284 328</p> 
 
\t \t \t \t <span>- £40.00</span> 
 
\t \t \t \t <div class="remaining"> 
 
\t \t \t \t \t <p>Remaining to pay</p> 
 
\t \t \t \t \t <span class="total">£119.00</span> 
 
\t \t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="validation val2"> 
 
\t \t \t \t <p>4537 3728 3273 3284 328</p> 
 
\t \t \t \t <span>- £15.00</span> 
 
\t \t \t </div> 
 
\t \t </div> 
 
</div>

Answer 3

你可以設置一個變量來跟蹤，如果用戶已經點擊了一次。

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'); 
      }); 
     } 
    }); 
}); 

Answer 4

檢查使用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語句或類似的管理更多的國家

Answer 5

我已經更新您的codepen（apparantly保存爲annonymous） https://codepen.io/anon/pen/oWqLox

我所做的是將點擊功能分解爲各自的功能。

增加了一個計數integar類型變量，並且在點擊函數中添加了一個if檢查，每次都會增加計數。 （最高數字檢查會將計數設置爲-1，因此當再次命中計數++增量時，該變量默認爲0）。

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

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

 
});

Answer 6

這裏，設置一個變量來跟蹤按鈕單擊事件。

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'); 
     }); 
    } 
}); 
}); 

Answer 7

沒有if語句

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

 

 
var bind=function(){ 
 
    $('#first').one("click",function() { 
 
    $('.val2') 
 
     .prependTo('.applied') 
 
     .delay(500) 
 
     .slideDown(400,function(){ 
 
     $('.total').html('£104.00'); 
 
     }); 
 
    }); 
 
    
 
}

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t box-sizing: border-box; 
 
} 
 

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

 
.main { 
 
\t 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{ 
 
\t display: none; 
 
\t overflow: hidden; 
 
\t margin-bottom: 16px; 
 
\t margin-top: 8px; 
 
} 
 

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

 
.validation p { 
 
\t float: left; 
 
} 
 

 
.validation span { 
 
\t float: right; 
 
} 
 

 
.remaining { 
 
\t clear: both; 
 
\t border-top: 1px solid #ccc; 
 
\t padding-top: 8px; 
 
\t margin-top: 32px; 
 
\t font-weight: bold; 
 
\t 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> 
 

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

Answer 8

你是rigtht。嘗試運行這段代碼

$(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(); 
 
    } 
 

 
    }); 
 
});

* { 
 
    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">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>