Как я могу прочитать значение по умолчанию с помощью Jquery?

#javascript #html #jquery

Вопрос:

Поэтому моя первая задача состоит в том, что я должен был создать поле ввода, и его значение по умолчанию должно быть «синим».

Первая проблема в том, что я не уверен, правильно ли я сделал эту часть.

Моя вторая задача-заставить вторую кнопку прочитать значение поля ввода и изменить цвет фона всех моих кнопок на этот цвет.

Что я сделал не так? (Вам не нужно беспокоиться о кнопках Test1 и Test2, они работают нормально)

     
$('#color').value = 'blue';


$('#button1').on('click', () => {
    console.log('U just clicked Test1')
    $('#button1').text("Teszt");
    
  });
  $('#button2').on('click', () => {
    $('#button1').text("Hey");
  });
  $('#button3').on('click', () => {
      $('button').css('background','$('#color').text()')

  });

1. Пожалуйста, укажите код в виде текста (кроме того, VSCode выделяет ошибку…)

2. Пожалуйста, предоставьте свой код в текстовой форме, а не в виде снимка экрана. Это облегчает цитирование. Никто здесь не запишет код с ваших скриншотов

Ответ №1:

HTML:

 <body>
  <input type="text" value="blue" id="color">
  <button class="button" id="button1">Test 1</button>
  <button class="button" id="button2">Test 1</button>
  <button class="button" id="button3">Test 1</button>
</body>

jQuery :
Получить значение поля ввода с помощью .val() метода

 $("button").css("background-color", $("#color").val());

Ответ №2:

Для записи данных из переменной в строку вы можете использовать «${переменная} » (эти акценты используются во французском и испанском языках).

так

 $('button').css('background-color', `${$('#color').val()}`)

Другой вариант, который у вас есть, — это просто использовать возвращаемое значение.

 $('button').css('background-color', $('#color').val())

Так что цитаты не нужны

Но вам следует рассмотреть случай, когда кто-то печатает что-то, что не является цветом, например, Foo или что-то в этом роде. Настройка цвета должна быть более детерминированной.

1. Что-то все еще не так. Это ничего не делает, но, по крайней мере, теперь это не ошибка

2. используйте .val() вместо .text (), и это должно сработать. (Отредактировал мой пост)