Question

有人可以向我解释为什么这不起作用，需要改变什么？我试图让3个图标在点击时执行不同的操作。

 var array = [
        {val : 1, icon: 'fa-bolt'},
        {val : 2, icon: 'fa-exclamation'},
        {val : 3, icon: 'fa-undo-alt'}
    ];


$(array).each(function() {
   var $item = $('<i>');
   $item.attr('value', this.val).attr('class', 'fas fa-2x ' + this.icon + ' item-class');
   $body.append($item);
});


$('.item-class').on('click', function(){
    if ($(this).val() === '1') {
      //do stuff
    }
    if ($(this).val() === '2') {
      //do stuff
    }
    if ($(this).val() === '3') {
      //do stuff
    }
});

Answer 1

您可以添加onClick属性，如下所示：

$(array).each(function() {
  var $item = $('<i>');
  $item
    .attr('value', this.val)
    .attr('class', 'fas fa-2x ' + this.icon + ' item-class')
    .attr('onClick', 'show('+this.val+')');
  $('body').append($item);
});

function show(value) {
  console.log(value)
}

Answer 2

您的问题在这一行：

$('.item-class').on('click', function(){

由fontawesome创建的 svg元素尚未出现。您需要委派click事件处理程序，如：

$body.on('click', '.item-class', function (e) {

第二个问题在于这一行：

$(this).val()

现在的值是svg元素的属性。

将其更改为：

$(this).attr('value')

var $body = $('body');
var array = [
    {val: 1, icon: 'fa-bolt'},
    {val: 2, icon: 'fa-exclamation'},
    {val: 3, icon: 'fa-undo-alt'}
];


$(array).each(function () {
    var $item = $('<i/>');
    $item.attr('value', this.val).attr('class', 'fas fa-2x ' + this.icon + ' item-class');
    $body.append($item);
});


$body.on('click', '.item-class', function (e) {
    var clickedValue = $(this).attr('value');
    console.log(clickedValue);
    if (clickedValue === '1') {
        //do stuff
    }
    if (clickedValue === '2') {
        //do stuff
    }
    if (clickedValue === '3') {
        //do stuff
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

Answer 3

为什么要为 i 元素使用值属性？这不符合HTML。

您可以使用数据 - * 属性：

$item.data('value', this.val).attr('class', 'fas fa-2x ' + this.icon + ' item-class');

在你的循环中：

// it will return int type, don't test with string
if ($(this).data('value') === 1) {

$（this）.val（）仅适用于输入，只需在HTML元素上添加 value 属性。

jQuery单击function / if语句不起作用

3 个答案: