提出時に結果テキストをローテーション

Question

私は、提出時に結果をどのように回転させるべきかをユーザが選択する形式をとろうとしています。 私が欲しいのは、選択したオプションに応じて、選択した値が90degまたは45degだけ回転することです。

$(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

すべてのブラウザで動作し、より良いソリューションを提供します。 クラスを追加したり削除したりすることで回転が行われます。

$(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>