Question

我试图让一个按钮在表单字段中切换1或0的值

<input type="text" name="website" id="websiteForm" value="0">   

<span class="btn btn-outline-primary" id="websiteBtn" onClick="websiteBtn()">Website</span>

<script>
function websiteBtn(){
    $('#websiteBtn').toggleClass('btn-outline-primary');
    $('#websiteBtn').toggleClass('btn-primary');
}
</script>

字段中的默认值为0，但是当按下按钮时我想要它tpo给字段赋值1.如果再次按下它，再次给它一个值0。

Answer 1

首先，您应该使用不显眼的事件处理程序，而不是过时且有缺陷的on*事件属性。

要解决您的实际问题，您可以检索当前值并使用三元表达式更新它，如下所示：

$(function() {
  $('#websiteBtn').click(function() {
    $(this).toggleClass('btn-outline-primary btn-primary');
    $('#websiteForm').val(function(i, v) {
      return v == '0' ? '1' : '0';
    });
  });
});

.btn-outline-primary { color: #666; } 
.btn-primary { color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="website" id="websiteForm" value="0">
<span class="btn btn-outline-primary" id="websiteBtn">Website</span>

Answer 2

您只需检查条件

即可

if ($("#websiteForm").val() == 0)
   $("#websiteForm").val('1');
else
   $("#websiteForm").val('0');

Answer 3

试试这个：

<input type="text" name="website" id="websiteForm" value="0">   

<span class="btn btn-outline-primary" id="websiteBtn" 
onClick="websiteBtn()">Website</span>

<script>
  function websiteBtn(){
   if($('#websiteForm').val() == '0'){
     $('#websiteForm').val('1');
    } else if($('#websiteForm').val() == '1'){
     $('#websiteForm').val('0');
    }
  }
</script>

Answer 4

您要运行的代码有点像这样：

＆＃13;

function websiteBtn(){
    $('#websiteBtn').toggleClass('btn-outline-primary');
    $('#websiteBtn').toggleClass('btn-primary');
}

var $websiteBtn = $("#websiteBtn");
var $website = $("#website");

$websiteBtn.on("click", function() {
    if ($website.val() == 0) {
        $website.val(1);
    } else {
        $website.val(0);
    }

});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="website" id="website" value="0">   

<span class="btn btn-outline-primary" id="websiteBtn" onClick="websiteBtn()">Website</span>

＆＃13;

Answer 5

您可以使用除基于text-Box值决定的类：

点击btn点击课程。
由于在文档准备就绪后更改了类，因此请使用$(document).on('eventName', 'selector', function () {});
根据当前班级设置文本框的值。

＆＃13;

 $(function () {
    $('#websiteBtn').on('click', function () {
        $('#websiteBtn').toggleClass('btn-outline-primary');
        $('#websiteBtn').toggleClass('btn-primary');
    });

    $(document).on('click', '.btn-outline-primary', function () {
        $('#websiteForm').val(0);
    });

    $(document).on('click', '.btn-primary', function () {
        $('#websiteForm').val(1);
    });
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="website" id="websiteForm" value="0">   

<span class="btn btn-outline-primary" id="websiteBtn">Website</span>

＆＃13;

单击按钮时jQuery切换值

5 个答案: