Question

这是场景。我有一个包含4个选项的下拉列表。如果选择了某个选项，那么我需要在该字段的标签旁边插入一个HTML元素。基本上我需要插入一个显示工具提示的FontAwesome图标。我遇到的问题是FontAwesome图标将被添加到页面中，因为选择了两个选项之一。如果我选择＆＃34; C40＆＃34;然后添加一个图标，如果我选择＆＃34; C60＆＃34;如果我再次选择＆＃34; C60，则添加另一个图标，依此类推。如何阻止change（）函数添加多个FontAwesome图标？

resModel.on( 'change', function(e) {

    if( resModel.val() == 'C40' || resModel.val() == 'C60' ) {

        $( '<i id="resC-control-box-tip" class="tooltip"></i>' ).insertAfter( '#field_2_3 label.gfield_label > span.gfield_required' );
        $( '<i id="resC-cell-tip" class="tooltip"></i>' ).insertAfter( '#field_2_4 label.gfield_label > span.gfield_required' );

        // Control box tooltip
        $( '#resC-control-box-tip' ).qtip({
            content: '<img class="avia_image " src="http://mywebsite.com/wp-content/uploads/2016/07/awesome-img.jpg" alt="" title="" itemprop="contentURL">',
            position: {
                my: 'left center',
                at: 'right center',
                target: $( '#resC-control-box-tip' )
            },
            style: {
                classes: 'qtip-blue'
            }
        });

        // Cell tooltip
        $( '#resC-cell-tip' ).qtip({
            content: '<img class="avia_image " src="http://mywebsite.com/wp-content/uploads/2016/07/another-awesome-img.jpg" alt="Resilience C Cell Serial Number" title="" itemprop="contentURL">',
            position: {
                my: 'left center',
                at: 'right center',
                target: $( '#resC-cell-tip' )
            },
            style: {
                classes: 'qtip-blue'
            }
        });

    }else if( resModel.val() == 'D40' || resModel.val() == 'D60' ) {

        $( '<i id="resD-control-box-tip" class="tooltip"></i>' ).insertAfter( '#field_2_38 label.gfield_label > span.gfield_required' );
        $( '<i id="resD-cell-tip" class="tooltip"></i>' ).insertAfter( '#field_2_39 label.gfield_label > span.gfield_required' );

        // Control box tooltip
        $( '#resD-control-box-tip' ).qtip({
            content: '<img class="avia_image " src="http://mywebsite.com/wp-content/uploads/2015/05/img3.jpg" alt="" title="" itemprop="contentURL">',
            position: {
                my: 'left center',
                at: 'right center',
                target: $( '#resD-control-box-tip' )
            },
            style: {
                classes: 'qtip-blue'
            }
        });

        // Cell tooltip
        $( '#resD-cell-tip' ).qtip({
            content: '<img class="avia_image " src="http://mywebsite.com/wp-content/uploads/2015/05/img3.jpg" alt="" title="" itemprop="contentURL">',
            position: {
                my: 'left center',
                at: 'right center',
                target: $( '#resD-cell-tip' )
            },
            style: {
                classes: 'qtip-blue'
            }
        });

    }

});

Answer 1

有点蹩脚的解决方案...... 将变量顶部的变量设置为0; 围绕要添加图标的所有块并在if语句中增加变量仅在变量仍为零时添加图标

Answer 2

@ Mike Brant我确实考虑了这一点，甚至尝试了一次，但是你的评论让我再次考虑它，最终成为我正在寻找的解决方案。这就是我所做的，我希望它可以帮助别人...

我不是在更改事件期间插入FontAwesome图标，而是简单地添加一次然后使用hide（）。然后在更改事件期间，我只显示（）图标。结果正是我所需要的。添加一个图标并显示何时选择了适当的选项。有时过于复杂太容易了，不幸的是我一直这样做！

var resModel = $( '#input_2_9' ); 
var resPlusModel = $( '#input_2_30' );

$( '<i id="resC-control-box-tip" class="tooltip"></i>' ).insertAfter( '#field_2_3 label.gfield_label > span.gfield_required' );
$( '<i id="resC-cell-tip" class="tooltip"></i>' ).insertAfter( '#field_2_4 label.gfield_label > span.gfield_required' );

var resC_ControlBox = $( '#resC-control-box' );
var resC_Cell = $( '#resC-cell' );
var resD_ControlBox = $( '#resD-control-box' );
var resD_Cell = $( '#resD-cell' );

resC_ControlBox, resC_Cell, resD_ControlBox, resD_Cell.hide();

// Res C Control box tooltip
$( '#resC-control-box-tip' ).qtip({
    content: '<img class="avia_image " src="http://mywebsite.com/wp-content/uploads/2016/07/awesome-img.jpg" alt="" title="" itemprop="contentURL">',
    position: {
        my: 'left center',
        at: 'right center',
        target: $( '#resC-control-box-tip' )
    },
    style: {
        classes: 'qtip-blue'
    }
});

// Res C Cell tooltip
$( '#resC-cell-tip' ).qtip({
    content: '<img class="avia_image " src="http://mywebsite.com/wp-content/uploads/2016/07/another-awesome-img.jpg" alt="" title="" itemprop="contentURL">',
    position: {
        my: 'left center',
        at: 'right center',
        target: $( '#resC-cell-tip' )
    },
    style: {
        classes: 'qtip-blue'
    }
});

$( '<i id="resD-control-box-tip" class="tooltip"></i>' ).insertAfter( '#field_2_38 label.gfield_label > span.gfield_required' );
$( '<i id="resD-cell-tip" class="tooltip"></i>' ).insertAfter( '#field_2_39 label.gfield_label > span.gfield_required' );

// Res D Control box tooltip
$( '#resD-control-box-tip' ).qtip({
    content: '<img class="avia_image " src="http://mywebsite.com/wp-content/uploads/2015/05/img3.jpg" alt="" title="" itemprop="contentURL">',
    position: {
        my: 'left center',
        at: 'right center',
        target: $( '#resD-control-box-tip' )
    },
    style: {
        classes: 'qtip-blue'
    }
});

// Res D Cell tooltip
$( '#resD-cell-tip' ).qtip({
    content: '<img class="avia_image " src="http://mywebsite.com/wp-content/uploads/2015/05/img3.jpg" alt="" title="" itemprop="contentURL">',
    position: {
        my: 'left center',
        at: 'right center',
        target: $( '#resD-cell-tip' )
    },
    style: {
        classes: 'qtip-blue'
    }
});

resModel.on( 'change', function() {

    if( resModel.val() == 'C40' || resModel.val() == 'C60' ) {

        resC_ControlBox, resC_Cell.show();

    }else if( resModel.val() == 'D40' || resModel.val() == 'D60' ) {

        resD_ControlBox, resD_Cell.show();

    }

});

下拉列表中的2个不同值运行相同的函数，但只需运行一次

2 个答案: