如何在jQuery中创建窗口小部件实例

时间:2018-01-11 13:09:23

标签: javascript jquery jquery-widgets jquery-ui-widget-factory

考虑我有两个小部件。

$.widget( "custom.car", {
    options: {
        name: ''
    },
    _create: function() {
        this.options.name = 'car'
    },
    random: function( event ) {
        console.log(this.options.name);
    },
    clear: function() { console.log('Clear'); }
});

$.widget( "custom.bike", {
    options: {
        name: ''
    },
    _create: function() {
        this.options.name = 'bike'
    },
    random: function( event ) {
        console.log(this.options.name);
    },
    clear: function() { console.log('Clear'); }
});

isCarisBike基于用户输入。

if(isCar) {
   $( "div" ).car();
   $( "div" ).car('random');
} else if(isBike) {
   $( "div" ).bike();
   $( "div" ).bike('random');
}

如果我在某个地方调用random方法,我会写if条件。 如果有任何可能的解决方案可以避免if条件或任何其他解决方案。

注意:我的问题是否正确?

2 个答案:

答案 0 :(得分:0)

实际上,您不得不决定要调用哪种方法,因此您必须使用if...else if构造或至少使用三元运算符。

这是一个减少语句数量的例子:

var fName = isCar ? "car" : "bike";
$( "div" )[fName]();
$( "div" )[fName]('random');

在此示例中,我假设如果isCarfalse isBiketrue,则与您的示例不完全相同。

答案 1 :(得分:0)

您的帖子中缺少很多信息,但这是一种避免" if else"言。

<form id="selection">
  <input id="car-radio" type="radio" value="car" checked> Car
  <input id="bike-radio" type="radio" value="bike"> Bike
</form>


<script type="text/javascript">

    var carFunc = function() {
        isCar = true;
        isBike = false;

        $( "div" ).car();
        $( "div" ).car('random');
    }

    var bikeFunc = function() {
       isCar = false;
       isBike = true;

       $( "div" ).bike();
       $( "div" ).bike('random');
    }

    $("#selection").on('click', '#car-radio', carFunc);
    $("#selection").on('click', '#bike-radio', bikeFunc);
</script>