Question

我正在尝试根据我们从菜单元素中选择的项目替换标题右侧的日历图标。

$(document).ready(function() {
$('ul.s-thumbs li').on('click', function() {
var getClass = $(this).attr('class');
$("#title").text(getClass);
});
});

Please check full code here

Answer 1

你可以这样做

    $(document).ready(function() {

  $('ul.s-thumbs li').on('click', function() {
    var getClass = $(this).attr('class');
    $("#title").text(getClass);
    classI= $(this).find("i").attr('class');
    $("#chicon i").attr("class",classI+" pull-right");
  });
});

以下是工作示例http://codepen.io/anon/pen/ALWRww

Answer 2

你可以这样写：

$(document).ready(function() {
 $('ul.s-thumbs li').on('click', function() {
    var text = $(this).attr('class');
    var icon = $(this).find('i').attr('class');
    var newClass = icon + ' pull-right';
   $("#title").text(text);
   $('#chicon i').removeClass();
   $('#chicon i').addClass(newClass);
  });
});

Answer 3

这将更改您的图标和文字

$(document).ready(function() {
   var oldicon = "fa fa-calendar-check-o";
   $('ul.s-thumbs li').on('click', function() {
      var getClass = $(this).attr('class');
      $("#title").text(getClass);
      var newicon = $(this).find("i").attr("class");
      $("#chicon i").removeClass(oldicon).addClass(newicon);
      oldicon = newicon;
  });
});

Answer 4

我做了一个小改动脚本如下：

$(document).ready(function() {

  $('ul.s-thumbs li').on('click', function() {
    var getClass = $(this).attr('class');
    $("#title").text(getClass);

    var icon_class=$(this).find('i').attr('class');
    $("#chicon").find('i').attr('class',icon_class+' pull-right');
  });
});

图标更改onclick菜单元素jquery

4 个答案: