Использование нескольких значений для метода iQuery .css() выдает ошибку: «отсутствует)». Однако его не хватает

Ошибка говорит, что мне не хватает скобки. Однако синтаксис идентичен w3Schools и Mozilla. .css() работает, если я устанавливаю только один стиль, но ломается при установке более 1.

jQuery

 <script>
      $(document).ready( function(){

          // event-handler to create new element
          function createContainer() {

              // variables store values from <select> element
              var elementType = $('select').val();

              // string containing markup for use with .append()
              var elementTypeStr = $(` <${elementType}> This is a ${elementType} </${elementType}> `);
              // this throws error, while setting single style doesn't
              $('#layout_demo').append( elementTypeStr );
              elementTypeStr.css("background-color":" blue" , "height": "100px");

          } // end createContainer()

          // ---------------------------- event handlers ---------------------

          $('#btn').click( createContainer );
          // button to delete latest element or selected element

      }); // end ready

  </script>

HTML:

<section id = "form">
  <!-- select element --->
  <label for = "container"> Please select type of container to add</label>
  <select id= "container">
    <option value= "div" > &ltdiv&gt </option>
    <option value= "p"> &ltp&gt </option>
    <option value= "section"> &ltsection&gt </option>

  </select>
  <!-- Seperate container to hold now elements -->

  <button id = "btn" > Create Container </button>
</section>

<div id = "layout_demo">



</div>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
20
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

При использовании .css() у вас есть два варианта передачи аргументов: строки, разделенные запятыми, или Буквенное обозначение объекта.

следовательно:

.css("background-color", " blue").css("height", "100px");

или скорее:

.css({backgroundColor:"blue" , height:"100px"});

Кроме того, вместо использования $('select').val(); используйте более строгий селектор, например какой-нибудь идентификатор; 'select' может быть любым выбором на вашей странице.

jQuery($ => {

  const createElement = () => {

    const tagName = $('#element').val();
    
    return $(`<${tagName}/>`, {
      appendTo: '#layout',
      text: `This is a ${tagName}`,
      css: {
        backgroundColor: "blue",
        height: "100px"
      },
    });

  }

  $('#create').on('click', createElement);

});
<section id = "form">
  <label>
    Please select type of container to add
    <select id = "element">
      <option value = "div">&ltdiv&gt</option>
      <option value = "p">&ltp&gt</option>
      <option value = "section">&ltsection&gt</option>
    </select>
  </label>
  <button id = "create">Create Container</button>
</section>
<div id = "layout"></div>

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Исправлена ​​недостающая скобка @CristianOrmazábal.

Taplar 30.05.2019 23:25

Несколько свойств .css() должны находиться внутри объекта.

$(document).ready(function() {

  // event-handler to create new element
  function createContainer() {

    // variables store values from <select> element
    var elementType = $('select').val();

    // string containing markup for use with .append()
    var elementTypeStr = $(` <${elementType}> This is a ${elementType} </${elementType}> `);
    // this throws error, while setting single style doesn't
    $('#layout_demo').append(elementTypeStr);
    elementTypeStr.css({
      "background-color": " blue",
      "height": "100px"
    });

  } // end createContainer()

  // ---------------------------- event handlers ---------------------

  $('#btn').click(createContainer);
  // button to delete latest element or selected element

}); // end ready
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id = "form">
  <!-- select element --->
  <label for = "container"> Please select type of container to add</label>
  <select id = "container">
    <option value = "div"> &ltdiv&gt </option>
    <option value = "p"> &ltp&gt </option>
    <option value = "section"> &ltsection&gt </option>

  </select>
  <!-- Seperate container to hold now elements -->

  <button id = "btn"> Create Container </button>
</section>

<div id = "layout_demo">



</div>

Другие вопросы по теме