Question

所以我有这个代码......

它有效，但不是我想要的。

$('.yesOrNo').on('click', function() {
  var $yes = $("#yes").on('click');
  var $no = $("#no").on('click');
  if ($yes) {
    $("#atSize").show();
    $("#ADA").hide();
  } else if ($no) {
    $("#anSize").show();
    $("#ADA").hide();
  }
});

我想要做的是，如果有人点击“是”，则会将其定向到HTML表单A，如果他们单击“否”，则会将其定向到HTML表单B

Answer 1

这是你想要的吗？

function yes(){ ... }
function no(){ ... }

var state = true;

$('.yesOrNo').on('click' , function(){
    if(state){
        yes();
        state = false;
    } else {
        no();
        state = true;
    }
});

Answer 2

您只需在条件中检查ID。

$('.yesOrNo').on('click' , function(){
    var $yes = $(this).attr('id') === 'yes';
var $no = $(this).attr('id') === 'no';

if($yes){
$("#atSize").show();
    $("#ADA").hide();
}
if($no){
$("#anSize").show();
    $("#ADA").hide();
}
});

如果真的只有两种选择 - 可以简化为：

    $('.yesOrNo').on('click' , function(){
        var $isYes = $(this).attr('id') === 'yes';

    if($isYes){
    $("#atSize").show();
        $("#ADA").hide();
    } else {
 $("#anSize").show();
        $("#ADA").hide();
}
    });

另一种方法：

    $('.yesOrNo').on('click' , function(){
var bool = $(this).attr('id') === 'yes';
var elToHide = bool ? '#atSize' : '#ADA';
var elToShow = bool ? '#ADA' : '#atSize';
$(elToHide).hide();
$(elToShow).show();
    });

Answer 3

$('.yesOrNo').on('click' , function(e){
    var choice = $(this).prop("id");

  if (choice=="yes") {
    $("#atSize").show();
    $("#ADA").hide();
  }
  else{
    $("#anSize").show();
    $("#ADA").hide();
  }
});

Answer 4

您可以使用toggle和this.id，如下所示：

$('#yes, #no').on('click' , function(e){
    $("#atSize").toggle(this.id == 'yes');
    $("#ADA").toggle(this.id !== 'yes');
});

$('#yes, #no').on('click' , function(e){
    $("#atSize").toggle(this.id == 'yes');
    $("#ADA").toggle(this.id !== 'yes');
}).trigger('click');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="yes">Yes</button>
<button id="no">No</button>
<form id="atSize">
  atSize: <input>
</form>
<form id="ADA">
  ADA: <input>
</form>

Answer 5

Javascript有一个功能，它被称为confirm()

你可以试试这个：

$('.yesOrNo').on('click', function() {
  if(confirm()){
    $("#atSize").show();
  }
  else{
    $("#anSize").show();
  }
  $("#ADA").hide();
});

制作按钮做不同的事情

5 个答案: