如何根据所选选项更改图标？

Question

这是我的代码：

＆＃13;

＆＃13;

$('#mySelect').on('change', function() {
  var value = $(this).val();
  $(".title").html(value);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<span class="icon"><i class="fa fa-check-square"></i>&nbsp;&nbsp;
<span class="title"> Title </span>
<br /><br />
<select id="mySelect">
  <option value="" selected disabled hidden>Choose a social media</option>
  <option value="Telegram" >Telegram</option>
  <option value="Instagram">Instagram</option>
  <option value="Facebook">Facebook</option>
  <option value="GooglePlus">GooglePlus</option>
</select>

＆＃13;

＆＃13;

＆＃13;

我尝试做的只是改变那个图标。我的意思是我有一个包含所需类名的数组：

var classes = {Telegram: "fa-telegram", Instagram: "fa-instagram", Facebook: "fa-facebook-square", GooglePlus: "fa-google-plus-square"};

我想根据所选选项更改i （进入span.icon）的类。我怎么能这样做？

Answer 1

您只需删除图标上的现有类，然后设置新类。这可以通过以下方式完成：

// Remove current icon.
$("#socialIcon i").attr("class","");

// Set the new icon.
$("#socialIcon i").addClass("fa");
$("#socialIcon i").addClass(classes[value]);

请注意，我在包装图标的范围上添加了ID“socialIcon”，以便能够唯一地识别它。

var classes = {Telegram: "fa-telegram", Instagram: "fa-instagram", Facebook: "fa-facebook-square", GooglePlus: "fa-google-plus-square"};


$('#mySelect').on('change', function() {
  var value = $(this).val();
  $(".title").html(value);
  
  // Remove current icon.
  $("#socialIcon i").attr("class","");
  
  // Set the new icon.
  $("#socialIcon i").addClass("fa").addClass(classes[value]);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<span id="socialIcon" class="icon"><i class="fa fa-check-square"></i>&nbsp;&nbsp;
<span class="title"> Title </span>
<br /><br />
<select id="mySelect">
  <option value="" selected disabled hidden>Choose a social media</option>
  <option value="Telegram" >Telegram</option>
  <option value="Instagram">Instagram</option>
  <option value="Facebook">Facebook</option>
  <option value="GooglePlus">GooglePlus</option>
</select>

Answer 2

请尝试$.prop()，因为您需要重置整个图标集。

＆＃13;

＆＃13;

var classes = {
  Telegram: "fa-telegram",
  Instagram: "fa-instagram",
  Facebook: "fa-facebook-square",
  GooglePlus: "fa-google-plus-square"
};
$('#mySelect').on('change', function() {
  var value = $(this).val();
  $(".title").html(value);
  $('.icon').find('i').prop('class', 'fa ' + classes[value]);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />


<span class="icon"><i class="fa fa-check-square"></i>&nbsp;&nbsp;
<span class="title"> Title </span>
<br /><br />
<select id="mySelect">
  <option value="" selected disabled hidden>Choose a social media</option>
  <option value="Telegram" >Telegram</option>
  <option value="Instagram">Instagram</option>
  <option value="Facebook">Facebook</option>
  <option value="GooglePlus">GooglePlus</option>
</select>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这可能有帮助

 var classes = {Telegram: "fa-telegram", Instagram: "fa-instagram", Facebook: "fa-facebook-square", GooglePlus: "fa-google-plus-square"};
$('#mySelect').on('change', function() {
   var value = $(this).val();
   var icon = classes[value];
   $('span.icon').find('i').attr('class', '');
   $('span.icon').find('i').addClass('fa '+classes[value]);
   $(".title").html(value);
});

Answer 4

$('.icon i.fa').removeClass(Object.values(classes).reduce((out, it) => { return out + ' ' + it}, '') + ' fa-check-square');

$('.icon i.fa').addClass(classes[value]);

https://api.jquery.com/addclass/

https://api.jquery.com/removeClass/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values

Answer 5

您也可以试试这个。

var classes = 
{Telegram: "fa-telegram", Instagram: "fa-instagram", Facebook: "fa-facebook-square", GooglePlus: "fa-google-plus-square"};


$('#mySelect').on('change', function() {
  var value = $(this).val();
  $(".title").html(value);  
  $("#socialIcon i").attr("class","fa "+classes[value]);
});