jquery - 提交时旋转结果文本

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。我还会将其设为内联 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>