jQuery 旋转插件答案

【问题标题】：jQuery Rotate PluginjQuery 旋转插件
【发布时间】：2011-03-13 15:00:51
【问题描述】：

我正在使用jQuery Rotate plugin 来旋转项目。它有效，但我遇到了一些问题。

我有那个代码：

<input type="text" name="np_angle" id="np_angle" size="2" maxlength="4" value="<?=$userinfo->np_angle?>" onchange="$('#np_drag').rotate(this.value)" />

<div id="np_drag" style="color:<?=$userinfo->np_color?>; font-size:<?=$userinfo->np_size?>px;position:absolute;top:<?=$userinfo->np_y?>px;left:<?=$userinfo->np_x?>px" class="draggable np_drag">
<?=$userinfo->np_text?>
</div>

<script>$("#np_drag").rotate(<?=$userinfo->np_angle?>);</script>

问题在于输入 onchange。当我更改它时，#np_drag 不会旋转。但是当值是静态的（例如onchange="$('#np_drag').rotate(45)" 它有效。

为什么？我该如何解决我的问题？

【问题讨论】：

标签： javascript jquery rotation jquery-rotate

【解决方案1】：

用id 选择它

...  id="my-id" onchange="$('#np_drag').rotate($('#my-id).val())" ...

此外，您可能希望通过 dom-ready 函数绑定 onchange 事件，而不是将其写入 HTML 源代码中

【讨论】：

但是当我尝试onchange="alert(this.value);" 时，它会提醒我在 np_angle 中输入的值。

【解决方案2】：

在声明$('#np_drag').rotate(this.value) 中，this 将引用np_drag，我相信您希望它引用np_angle 的值。试试这个：

<input type="text" name="np_angle" id="np_angle" size="2" maxlength="4" value="<?=$userinfo->np_angle?>" />

<script>$('#np_angle').bind('change', function(e){$('#np_drag').rotate($('#np_angle').val())});" </script>

【讨论】：

并添加 parseInt($('#np_angle').val())