Question

我动态添加输入字段和“x”，允许用户删除此字段。看起来像this

Javascript看起来像这样：

$(document).ready(function() {
    // When the add_button is pressed
    $('#add_correct_answer').click(function() {
    // Container (already created)
    var container = $('.buttons-fields-correct');

    // Create the input wrapper (input tag + delete button), and append it to `container`
    var input_wrapper = $('<div>', { class: 'input-wrapper' }).appendTo(container);

    // Create an input tag, and append it to input_wrapper
    var input = $('<input>', { name: 'task[correct_answers][]', type: 'text' }).appendTo(input_wrapper);

    // Create the remove button, append it to input_wrapper, and add a click callback to
    // remove the input wrapper if it's pressed.
    var remove = $('<span>', { text: 'x' }).appendTo(input_wrapper).click(function() {
      input_wrapper.remove();
    });
    });

相关HTML：

  <%= label :form_type, t(:add_correct_answers) %>
  <div class="buttons-wrapper">
    <%= button_tag t(:add_field), id: 'add_correct_answer', type: 'button' %>
    <div class="buttons-fields-correct">
      <div>
      </div>
    </div>
  </div>

我想要做的是给这个“x”一个我可以修改的类，并改变这个“x”的外观/位置。例如，将其放在右侧的输入内。

Answer 1

您可以在定义元素类型时添加它，也可以像class一样添加text属性。

所以

$('<span class="some-class">', { text: 'x' })

或

$('<span>', { text: 'x', class:'some-class' })

Answer 2

var remove = $('<span>', { text: 'x' }).addClass('your-class').appendTo(input_wrapper).click(function() {
  input_wrapper.remove();

Answer 3

要么做Gaby的建议，要么在你创建它之后给跨度命名：

document.(getElementInSomeWay).setAttribute("class", "democlass"); = "myClass";

或在Jquery：

$('<span>').addClass('myClass');

我建议你在一个单独的css文件或一些预处理器中制作的外观。然后应用具有特定位置坐标

的类

将类添加到javascript创建的元素

3 个答案: