javascript 如何根据输入的值在html中添加fontawesome图标

yjghlzjz 于 2023-09-29 发布在 Java

关注(0)|答案(2)|浏览(137)

如果我的问题看起来很愚蠢，我很抱歉，因为我是一个新手。
见下文代码

msg编辑-

来源：https://stackoverflow.com/questions/77166104/how-to-add-a-fontawesome-icon-in-html-according-to-the-value-of-an-input

2条答案

按热度按时间

62lalag41#

别担心，你的问题一点也不愚蠢，你试图学习和解决问题是很好的。要根据下拉列表中的所选选项动态更改输入文本的内容并相应地显示FontAwesome图标，您可以使用JavaScript执行以下步骤：
1.在HTML中包含FontAwesome：确保您在HTML文件中包含了FontAwesome库。您可以通过在HTML文件的<head>部分中添加以下行来完成此操作：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

这将加载FontAwesome库，它提供了广泛的图标。
1.修改JavaScript代码：更新您的JavaScript代码，根据下拉列表中的所选选项设置相应的FontAwesome图标。下面是更新的代码：

// Get the <select> element
var selectElement = document.querySelector('select[name="current_weather"]');

// Get the <input> element where you want to display the icon
var tagBox = document.getElementById('tag_box');

// Add an event listener to the <select> element
selectElement.addEventListener('change', function () {
    var selectedValue = parseInt(selectElement.value);

    if (selectedValue === 1) {
        tagBox.innerHTML = '<i class="fas fa-cloud-rain"></i>'; // FontAwesome icon for rainy
    } else if (selectedValue === 2) {
        tagBox.innerHTML = '<i class="fas fa-cloud"></i>'; // FontAwesome icon for cloudy
    } else {
        tagBox.innerHTML = ''; // Clear the content if the value is not 1 or 2
    }
});

1.更新您的HTML：确保您有一个id为“tag_box”的<input>元素，您希望在其中显示FontAwesome图标：

Weather <select name="current_weather">
    <option value="1">Rainy</option>
    <option value="2">Cloudy</option>
    <option value="3">Sunny</option>
</select>

<input type="text" id="tag_box">

现在，当您从菜单中选择一个选项时，相应的FontAwesome图标将显示在输入文本框中。如果选择的选项不是1或2，则输入框将被清除。
请记住调整JavaScript代码中的图标类，以匹配您希望从FontAwesome使用的特定图标。在这个例子中，我使用“fas fa-cloud-rain”表示下雨的图标，使用“fas fa-cloud”表示多云的图标。您可以在FontAwesome网站上找到更多图标，并根据需要自定义图标。

赞(0）回复(0）举报 2023-09-29

jvidinwx2#

let weatherSelector = $('select[name="current_weather"]');

weatherSelector.on('change', () =>
{
  let tagBox = $('#tag_box');
  tagBox.find('i.fas').hide();
  
  let selectedValue = parseInt(weatherSelector.find(":selected").val());
  $(tagBox.find('i.fas')[selectedValue]).show();

});

weatherSelector.trigger('change');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>

<label for="current_weather">Weather:</label>
<select name="current_weather" id="current_weather">
  <option value="1" selected>Sunny</option>
  <option value="2">Night</option>
  <option value="3">Windy</option>
  <option value="4">Cloudy</option>
  <option value="5">Snowing</option>
  <option value="6">Lightning</option>
  <option value="7">Partial Cloud</option>
  <option value="8">Rainy</option>
</select>

<span id="tag_box">
  <i class="fas"></i>
  <i class="fas fa-sun"></i>
  <i class="fas fa-moon"></i>
  <i class="fas fa-wind"></i>
  <i class="fas fa-cloud"></i>
  <i class="fas fa-snowflake"></i>
  <i class="fas fa-bolt"></i>
  <i class="fas fa-cloud-sun"></i>
  <i class="fas fa-cloud-rain"></i>
</span>

与@MH BIPUL的答案相同，但在Jquery中，
假设这是你的html：

<span id="tag_box">
    <i class="fas"></i>
</span>

Weather <select name="current_weather">
<option value="1">Rainy</option>
<option value="2">Cloudy</option>
<option value="3">Sunny</option>
</select>

你可以从这里下载jquery（如果你还没有的话）：
https://jquery.com/download/
在你的.html文件中（就在标签关闭之前）：

/* if you already have jquery don't write this next line */
<script src="<path to jquery.min.js>"></script>

<script type="text/javascript">
let weatherSelector = $('select[name="current_weather"]');

weatherSelector.on('change', () =>
{
    let tagBox = $('#tag_box');
    let selectedValue = parseInt(event.target.value);

    if (selectedValue == 1)
        tagBox.find('i.fas').addClass('fa-cloud-rain').removeClass('fa-cloud');
    else if (selectedValue == 2)
        tagBox.find('i.fas').addClass('fa-cloud').removeClass('fa-cloud-rain');
    else
        tagBox.find('i.fas').removeClass('fa-cloud fa-cloud-rain');

});
</script>

此代码仍然可以根据您的senario进行调整。

赞(0）回复(0）举报 2023-09-29

我来回答

javascript 如何根据输入的值在html中添加fontawesome图标

2条答案

相关问题

热门标签

最新问答