切换背景位置两次答案

【问题标题】：toggle background-position TWICE切换背景位置两次
【发布时间】：2023-04-04 08:11:01
【问题描述】：

我想通过单击同一个按钮两次来取消选择该按钮。

单击女性或男性后，脚本会更改背景位置并将数据正确插入到性别输入中，但是如果再次单击（两次），我想将相同的按钮返回到其原始位置并删除性别输入字段中的结果。

谁能建议修改我的脚本？

这应该是一个单独的脚本吗？

谢谢

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

【问题讨论】：

标签： javascript jquery input toggle background-position

【解决方案1】：

这样就可以了：

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

【讨论】：

效果很好，但我无法让它在我的页面上栩栩如生......嗯。一定是某处发生冲突
@Erik Firebug 的控制台很有可能会告诉您问题出在哪里。

【解决方案2】：

类似这样的：

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

【讨论】：

【解决方案3】：

看看这个demo。

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

【讨论】：