在提交

Question

我正在尝试做一个公式，用户选择选项如何在提交时轮换结果。 我想要的是，在提交时，所选值应该旋转90度或45度，具体取决于所选的选项。

$(document).ready(function(){
  $("#btnsubmit").click(function(){
    var text = $("#sel1 option:selected").text();
    $("#result").text(text);
  });
  $("input[type='radio']").change(function(){
    if($(this).val() == 90){
      $(this).val().css("transform","rotate(90deg)");
    }
  });
});

https://codepen.io/index1337/pen/ZKPNyJ

Answer 1

您想将转换应用于#result。我也会让它inline-block所以它旋转到位。还在您的输入中添加了form标记，并禁用了submit事件。

$(document).ready(function() {
  $result = $('#result');
  $("#btnsubmit").click(function() {
    var text = $("#sel1 option:selected").text();
    $result.text(text);
  });
  $("input[type='radio']").change(function() {
    if ($(this).val() == 90) {
      $result.css("transform", "rotate(90deg)");
    } else {
      $result.css("transform", "rotate(45deg)");
    }
  });
});

#result {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form onsubmit="return false;">
  <input type="radio" value="90" name="rotate" class="90deg" />90deg
  <input type="radio" value="45" name="rotate" class="45deg" />45deg
  <select name="selection" id="sel1">
  <option value="1">90</option>
  <option value="2">45</option>
</select><br>
  <button name="submit" value="submit" id="btnsubmit">Submit</button>
</form>

<div id="result">
</div>

Answer 2

也许是一个适用于所有浏览器的更好的解决方案。 通过添加和删除类来完成旋转。

＆＃13;

＆＃13;

memid

＆＃13;

$(document).ready(function(){
   $("#btnsubmit").click(function(){
       var text = $("#sel1 option:selected").text();
       $("#result").text(text);
   })
  $( "input[type='radio']" ).change(function() {
  if( $( this ).val() == 90) {
	 $("#result").addClass("rotated90");
 	 $("#result").removeClass("rotated45");
  }else{
  	$("#result").removeClass("rotated90")
  	$("#result").addClass("rotated45");
  }
});
  
});

＆＃13;

.rotated90{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.rotated45{
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#result{
  position:absolute;
}

＆＃13;

＆＃13;

＆＃13;