Question

这是我的代码

＆＃13;

$(document).ready(function(){
         $("a.btn1").click(function() {   
               $(this).find("i").toggleClass("fa-thumbs-o-up fa-thumbs-o-down");
      
             });
            
             $("a.btn2").click(function(){    
                 
                  $(this).find("i").toggleClass("fa-smile-o fa-frown-o"); 
            }); 
        
            $("a.btn3").click(function(){ 
        
               
                $(this).find("i").toggleClass("fa-unlock fa-unlock-alt"); 
            }); 
     });

＆＃13;

.fa {
 font-size: 58px !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div class="col-sm-10 col-sm-offset-1">
    <a class="btn1"><i class="fa fa-thumbs-o-up"></i></a>
    <a class="btn2"><i class="fa fa-smile-o"></i></a>
    <a class="btn3"><i class="fa fa-unlock"></i></a>
</div>

＆＃13;

现在我想一次只选择一个button/"<a"，这里不是单选按钮

我试过很多例子，但大部分都是单选按钮

但我想将它用于<a标签，一次只能使用一个选项..

但是这里选择所有三个

之后只提交一个..由于这个在提交我面临错误..分数的价值不匹配..请帮助这种

Answer 1

一种选择是在active-class上添加original-class和<a>。只需使用.attr()

获取这些值即可

＆＃13;

$(".col-sm-10>a").click(function() {
  var selected = $(this).find('i')[0];

  $(".col-sm-10>a>i").removeClass(function(e) {
    return selected !== this ? $(this).attr('active-class') : $(this).attr('original-class');
  }).addClass(function() {
    return selected !== this ? $(this).attr('original-class') : $(this).attr('active-class');
  });
});

＆＃13;

.fa {
  font-size: 58px !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div class="col-sm-10 col-sm-offset-1">
  <a class="btn1"><i original-class='fa-thumbs-o-up' active-class='fa-thumbs-o-down' class="fa fa-thumbs-o-up"></i></a>
  <a class="btn2"><i original-class='fa-smile-o' active-class='fa-frown-o' class="fa fa-smile-o"></i></a>
  <a class="btn3"><i original-class='fa-unlock' active-class='fa-unlock-alt' class="fa fa-unlock"></i></a>
</div>

＆＃13;

Answer 2

更新信息的新答案

- 可以切换已经选择的答案

＆＃13;

$('.buttons a').click(function() {
	if ($(this).hasClass('selected')) {
    $(this).removeClass('selected');
    $('.buttons a i:nth-child(1)').removeClass('hidden').addClass('shown');
    $('.buttons a i:nth-child(2)').removeClass('shown').addClass('hidden');
  } else {
    $('.buttons a').removeClass('selected');
    $('.buttons a i:nth-child(1)').removeClass('hidden').addClass('shown');
    $('.buttons a i:nth-child(2)').removeClass('shown').addClass('hidden');
    $(this).addClass('selected');
          $(this).find('i').toggleClass('shown').toggleClass('hidden');
  }
})

＆＃13;

.fa {
 font-size: 58px !important;
}
.selected i {
  color: red;
}
i.hidden {
  display: none;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons col-sm-10 col-sm-offset-1">
  <a class="btn1">
    <i class="fa fa-thumbs-o-up shown"></i>
    <i class="fa fa-thumbs-o-down hidden"></i>
  </a>
  <a class="btn2">
    <i class="fa fa-smile-o shown"></i>
    <i class="fa fa-frown-o hidden"></i>
  </a>
  <a class="btn3">
    <i class="fa fa-unlock shown"></i>
    <i class="fa fa-unlock-alt hidden"></i>
  </a>
</div>

＆＃13;

https://jsfiddle.net/Hastig/eno21p25/

原始样式答案

- 无法切换选择的答案

如果您想要在a标记中添加一个类来显示选择内容，可以删除“已选择”标记。来自所有a代码并将其添加到this ..

＆＃13;

$('.buttons a').click(function() {
	$('.buttons a').removeClass('selected');
  $('.buttons a i').removeClass('fa-thumbs-o-down fa-frown-o fa-unlock-alt');
  $('.buttons a.btn1 i').addClass('fa-thumbs-o-up');
  $('.buttons a.btn2 i').addClass('fa-smile-o');
  $('.buttons a.btn3 i').addClass('fa-unlock');
  $(this).addClass('selected');
	if ($(this).hasClass('btn1')) {
    $(this).find("i").toggleClass("fa-thumbs-o-up fa-thumbs-o-down");
  } else if ($(this).hasClass('btn2')) {
    $(this).find("i").toggleClass("fa-smile-o fa-frown-o"); 
  } else if ($(this).hasClass('btn3')) {
    $(this).find("i").toggleClass("fa-unlock fa-unlock-alt"); 
  }
})

＆＃13;

.fa {
 font-size: 58px !important;
}
.selected i {
  color: red;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons col-sm-10 col-sm-offset-1">
  <a class="btn1"><i class="fa fa-thumbs-o-up"></i></a>
  <a class="btn2"><i class="fa fa-smile-o"></i></a>
  <a class="btn3"><i class="fa fa-unlock"></i></a>
</div>

＆＃13;

https://jsfiddle.net/Hastig/hncLnzh4/

对于非单选按钮，Html一次只选择一个按钮

2 个答案: