添加 class 到基于 select 的文本区域（jquery 到 javascript）

Question

我有一个脚本可以在 select 下拉列表中进行选择时更改 textarea 的字体。它写在 jQuery.

var selectedScheme = '';
$('.addon-select').change(function() {
  $('.addon-custom-textarea').removeClass(selectedScheme).addClass($(this).val());
  selectedScheme = $(this).val();
});

jQuery Fiddle

我想用常规 JavaScript 重写这个。这是我到目前为止所拥有的，但它不起作用。

if (document.getElementsByClassName('.addon-select').value == 'arial') {
     document.getElementsByClassName('.addon-custom-textarea').className += ' arial'
}

Broken Fiddle

我错过了什么？

Answer 1

getElementsByClassName returns 类似对象的数组。因此，您必须使用 index 来访问特定元素。

此外，您还缺少原版 javascript 的更改事件处理程序。

所以

document.getElementsByClassName('.addon-select')

应该是

document.getElementsByClassName('addon-select')[0]

 OR

document.querySelector('.addon-select')

JS

document.querySelector('.addon-select').addEventListener('change', function() {
    var textArea = document.querySelector('.addon-custom-textarea');

    textArea.className = 'addon-custom-textarea ' + this.value;
});

Check Fiddle

Answer 2

您错过了将 event handler 附加到 select。而且我还添加了 id 到 select。如果你想使用class，你必须像

一样访问它

document.getElementsByClassName('addon-select')[0]

因为 getElementsByClassName 会 return 你 array-like object，你需要从中得到 first item。

document.getElementById('selectFont').addEventListener("change", function(){

    let text = document.querySelector('.addon-custom-textarea');
    text.className = 'addon-custom-textarea ' + this.value;


}, false);

input, select, textarea { padding: 10px 10px; width: 200px; }  /* not important */


.arial {
  font-family: 'Arial';
}

.times {
  font-family: 'Times New roman';
}

.courier-new {
  font-family: 'Courier New';
}

.verdana {
  font-family: 'Verdana';
}

<select id="selectFont" class="addon-select">
  <option selected disabled>Select a font...</option>
  <option value="arial">Arial</option>
  <option value="times">Times New roman</option>
  <option value="courier-new">Courier New</option>
  <option value="verdana">Verdana</option>
</select>

<br />

<textarea class="addon-custom-textarea" rows="5">This is some text</textarea>

Answer 3

您应该使用 document.getElementsByClassName('class-name')[0] 来定位单个元素。

您可以使用 classList 在 事件中添加和删除类 listener - 请参阅下面的演示和 updated fiddle here:

var selectedScheme;
document.getElementsByClassName('addon-select')[0].addEventListener('change',
  function() {
    if (selectedScheme)
      document.getElementsByClassName('addon-custom-textarea')[0].classList.remove(selectedScheme);
    document.getElementsByClassName('addon-custom-textarea')[0].classList.add(this.value);
    selectedScheme = this.value;

  });

input,
select,
textarea {
  padding: 10px 10px;
  width: 200px;
}
/* not important */

.arial {
  font-family: 'Arial';
}
.times {
  font-family: 'Times New roman';
}
.courier-new {
  font-family: 'Courier New';
}
.verdana {
  font-family: 'Verdana';
}

<select class="addon-select">
  <option selected disabled>Select a font...</option>
  <option value="arial">Arial</option>
  <option value="times">Times New roman</option>
  <option value="courier-new">Courier New</option>
  <option value="verdana">Verdana</option>
</select>

<br />

<textarea class="addon-custom-textarea" rows="5">This is some text</textarea>

添加 class 到基于 select 的文本区域（jquery 到 javascript）

Adding class to textarea based on select (jquery to javascript)

html

javascript

css

jquery

textarea