Question

我有一小段代码，我无法解决方向问题。我有一个左边恒定方向的文本字段。我有2个单选按钮，“右”和“左”。当我点击“右”时，它显示“右”单选按钮的值，与“左”相同。我希望在点击“向右”时，文字显示在dir="rtl"的文字字段的右侧，点击“左”时，dir="ltr"。

以下是代码：

$(function() {
  $('input[name="radio-1"]').on('change', function() {
    $('input[name="direction"]').val($(this).val());
  });
});

.toggler {
  height: 50px;
  position: absolute;
}
.toggler2 {
  position: absolute;
}

<!doctype html>
<html lang="en">

<head>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>

<body>
  <legend>Choose direction:</legend>
  <input type="radio" class="click" name="radio-1" id="radio-1" value="Right">
  <label for="radio-1">Right</label>
  <input type="radio" class="click" name="radio-1" id="radio-2" value="Left">
  <label for="radio-2">Left</label>
  <div class="toggler2">
    <input type="text" name="direction">
  </div>
</body>

</html>

工作代码：https://jsfiddle.net/pk0vnkLn/

Answer 1

您可以通过基于选中的选项在元素上设置dir属性来解决此问题：

$('input[name="radio-1"]').on('change', function() {
    var value = $(this).val();
    $('input[name="direction"]').val(value).attr('dir', value == 'Right' ? 'rtl' : 'ltr');
});

Updated fiddle

如何在单选按钮上更改文本框的文本方向？

1 个答案: