javascript - 如何在文本更改/添加时保持单选按钮静态

Question

我有一个单选按钮(列表)，它会在单击“下一步”按钮时更改文本(使用 JavaScript)。文本会更改，但当文本变长时对齐会关闭，这使得它不会保持在恒定位置。

即

对齐后(向左移动了一些地方)

Javascript(radio 是定义为“var”的变量): radio[0].nextSibling.textContent = "我们无法探索我们自己的知识";

HTML/CSS:

<div  style="position:absolute;transform: scale(2);top:80vh;left:20vw">
         <input type='radio' name='rblist1' value='0'> <br> 
         <input type='radio' name='rblist1' value='1'> <br> 
         <input type='radio' name='rblist1' value='2'>
           </div>

任何帮助都会很棒!谢谢

Answer 1

跳过当前的样式并在标签内构建您的 radio 。然后浏览器就会知道指定的文本属于 radio ，并且当单击该文本时 radio 也会激活。远离在具有多个元素的容器上使用 transform:scale 并且非常清楚 position: absolute 经常会咬你一口......

function changeText(){
  $("label>span").eq(1).text("This is an even longer text wich will test the structure of the HTML");
}

.transformScale2{
 transform: scale(2); 
}

.inputRadioContainer{
margin-bottom: 10px;
font-size: large;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="inputRadioContainer">
    <label>
      <input type='radio' name='rblist1' value='0' class="transformScale2">
      <span>This is the label with a long text</span>
  </label>
  </div>
  <div class="inputRadioContainer">
    <label>  
      <input type='radio' name='rblist1' value='1' class="transformScale2">
      <span>This is the label</span>    
  </label>
  </div>
  <div class="inputRadioContainer">
    <label>  
      <input type='radio' name='rblist1' value='2' class="transformScale2">
      <span>This is the label</span>
  </label>
  </div>
 </div>
 
 <input type="button" onClick="changeText()" value="Click me"/>