在提交时旋转结果文本

我正在尝试做一个用户选择选项的方式，如何在提交时旋转结果。我想要的是，提交选定的值应该旋转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

来源

2017-05-25 Ionut

是的，非常感谢你！@ MichaelCoker – Ionut

@lonut欢迎您。你应该回复我的答案，但:)一旦你觉得问题解决了，一定要接受一个解决方案（复选标记的答案） –

要应用的转化为#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>

来源

2017-05-25 22:32:24

也许一个更好的解决方案，为所有的浏览器上运行。旋转是通过添加和删除类来完成的。

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<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> 
 
<div id="result"> 
 
</div>

来源

2017-05-25 22:57:10 Tomas

在提交时旋转结果文本

回答

相关问题