[英]Two buttons that toggle with background-position changes with a result in an Input
[英]toggle background-position TWICE
我想通过单击同一按钮两次来取消选择该按钮。
单击“女性”或“男性”后,脚本会更改背景位置并将数据正确插入性别输入中,但是如果再次单击(两次) ,我想将相同按钮返回到其原始位置,然后删除性别输入栏 。
有人可以建议修改我的脚本吗?
这应该是一个单独的脚本吗?
谢谢
$(function(){
$("input[type='button']").click(function() {
$("input[type='button']").removeClass("button-toggle-on");
$(this).addClass("button-toggle-on");
if($(this).hasClass("gnF")) varval = 'female';
else varval = 'male';
$("#gender").val(varval);
});
});
像这样:
$(function(){
$("input[type='button']").click(function() {
if ($(this).hasClass("button-toggle-on")) {
$(this).removeClass("button-toggle-on");
$("#gender").val('');
} else {
$("input[type='button']").removeClass("button-toggle-on");
$(this).addClass("button-toggle-on");
if($(this).hasClass("gnF")) varval = 'female';
else varval = 'male';
$("#gender").val(varval);
}
});
});
看一下这个演示 。
var $buttons = $("input[type='button']");
$buttons.click(function() {
$buttons.not(this).removeClass('button-toggle-on');
$(this).toggleClass('button-toggle-on');
var varval = '';
if ($(this).hasClass('button-toggle-on')) {
varval = $(this).hasClass('gnF') ? 'female' : 'male';
}
$("#gender").val(varval);
});
这将达到目的:
$(function(){
$("input[type='button']").click(function() {
if($(this).hasClass("button-toggle-on")) {
$(this).removeClass("button-toggle-on");
$("#gender").val("");
}
else {
$(".button-toggle-on").removeClass("button-toggle-on");
$(this).addClass("button-toggle-on");
$("#gender").val(($(this).hasClass("gnF"))? "female" : "male");
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.