6

我有刷新按钮集的 jQuery 代码：

$("#myRadio").buttonset('refresh');

但是我发现了一个在此行之前调用它的用例：

$("#myRadio").buttonset();

然后因为它没有初始化而爆炸。我想看看是否有办法确定这个 buttonset() 初始化是否已经发生，所以我可以在调用 referh 之前检查：

就像是：

if($("#myRadio").buttonsetIsInitialized())
{
    $("#myRadio").buttonset('refresh');
}

进行此检查的正确方法是什么？

4

5 回答 5

4

工作小提琴。

buttonsetIsInitialized()您可以通过向jQuery 对象添加新方法来按照您在 OP 中描述的方式执行此操作：

$.fn.buttonsetIsInitialized = function () {
    return this.hasClass('ui-buttonset');
};

此方法将检查类ui-buttonset（实例化添加到元素）是否存在于元素类列表中。

if($("#myRadio").buttonsetIsInitialized()){
    $("#myRadio").buttonset('refresh');
}

希望这可以帮助。

未初始化的情况：

$.fn.buttonsetIsInitialized = function () {
  return this.hasClass('ui-buttonset');
};

if( $("#myRadio").buttonsetIsInitialized() ){
  console.log('Refresh element');
}else{
  console.log('Not initialized');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css" rel="stylesheet"/>


<div id="myRadio">
  <input id="first" type="radio" value="1" name="steps"/><label for="first">First</label>
  <input id="second" type="radio" value="2" name="steps"/><label for="second">Second</label>
</div>

初始化案例：

$('#myRadio').buttonset(); //Initilized

$.fn.buttonsetIsInitialized = function () {
  return this.hasClass('ui-buttonset');
};

if( $("#myRadio").buttonsetIsInitialized() ){
  console.log('refresh element');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css" rel="stylesheet"/>

<div id="myRadio">
  <input id="first" type="radio" value="1" name="steps"/><label for="first">First</label>
  <input id="second" type="radio" value="2" name="steps"/><label for="second">Second</label>
</div>

于 2016-11-24T16:26:36.283 回答
1

您可以检查您的项目是否有一个data()名为的对象项目uiButtonset：

function isButtonsetInitialized(item) {
    return (typeof $(item).data('uiButtonset') == 'object');
}

然后将其用作

if(isButtonsetInitialized('#myradio')) {
  $('#myradio').buttonset('refresh');
}

查看这个工作示例。

function isButtonsetInitialized(item) {
  return (typeof $(item).data('uiButtonset') == 'object');
}

$(function() {
  console.log(isButtonsetInitialized('#test_1'));
  setTimeout(function() {
    $('input[type="radio"]').button().buttonset();
    console.log(isButtonsetInitialized('#test_1'));
  }, 1000);
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link media="screen" rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<input type="radio" name="test" id="test_1" value="1" />
<label for="test_1">FIRST</label>
<input type="radio" name="test" id="test_2" value="2" />
<label for="test_2">SECOND</label>
<input type="radio" name="test" id="test_3" value="3" />
<label for="test_3">THIRD</label>

于 2016-11-24T15:41:04.940 回答
1

我不再使用 jquery ui - 我搬到了 jquery mobile 但我希望我能提供帮助......

重要提示：我假设您已经知道 buttonset 已被弃用？

来自http://api.jqueryui.com/buttonset/

此小部件已弃用，请改用Controlgroup。

如果被迫继续使用buttonset，则http://api.jqueryui.com/buttonset/引用类“ui-buttonset”。基本上，我会寻找这个类是否存在或不存在于您的选择器周围的某个地方。如果做不到这一点，我会检查设置了哪些类前/后按钮集，并将其用作参考。

抱歉，我无法提供更准确的建议解决方案。

if( ! $("#myRadio").parent().find("ui-buttonset") )
{
    $("#myRadio").buttonset('refresh');
}
于 2016-11-24T15:50:16.253 回答
1

我有一个非常优雅的解决方案，使用buttonsetcreate按钮集的内置事件。或者，您可以使用按钮集的回调事件。这里的所有描述https://api.jqueryui.com/buttonset/#event-create

此事件将允许您在按钮集启动时，您可以使用它做任何您想做的事情。无需一次又一次地检查它是否是 init 。只需将您的代码放入event并完成。

小提琴

https://jsfiddle.net/ergec/wk9ew1bp/

html

<fieldset>
    <legend>Favorite jQuery Project</legend>
    <div id="radio">
        <input type="radio" id="sizzle" name="project">
        <label for="sizzle">Sizzle</label>

        <input type="radio" id="qunit" name="project" checked="checked">
        <label for="qunit">QUnit</label>

        <input type="radio" id="color" name="project">
        <label for="color">Color</label>
    </div>
</fieldset>
<button id="initbuttonset">Init</button>
<button id="checkbuttonset">Check</button>

js

var isbuttonsetinit = false;
$("#radio").on("buttonsetcreate", function(event, ui) {
    isbuttonsetinit = true;
    alert("buttonset init");
});
$("#initbuttonset").click(function() {
    $("#radio").buttonset();
});
$("#checkbuttonset").click(function() {
    alert(isbuttonsetinit);
});

js（替代）

var isbuttonsetinit = false;
$("#initbuttonset").click(function() {
    $("#radio").buttonset({create: function( event, ui ) {
        isbuttonsetinit = true;
        alert("buttonset init");
    }});
});
$("#checkbuttonset").click(function() {
    alert(isbuttonsetinit);
});
于 2016-11-24T18:00:53.637 回答
1

另一种方法是使用 jQuery ui 小部件工厂的实例方法。

检索小部件的实例对象。如果元素没有关联的实例，则返回 undefined。

这是一个例子：

$(function() {
  $('#button-group-initiated').buttonset();

  console.log(
    "Button set one instanced? > " + $('#button-group-initiated').buttonset("instance")
  )

  console.log(
    "Button set two instanced? > " + $('#button-group-woot').buttonset("instance")
  )
});
body > div:nth-of-type(2) {
  margin-top: 20px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div>
  <div id="button-group-initiated">
    <input type="radio" id="sizzle" name="project">
    <label for="sizzle">Sizzle</label>

    <input type="radio" id="qunit" name="project" checked="checked">
    <label for="qunit">QUnit</label>

    <input type="radio" id="color" name="project">
    <label for="color">Color</label>
  </div>
</div>

<div>
  <div id="button-group-woot">
    <input type="radio" id="sizzle2" name="project2">
    <label for="sizzle2">Sizzle</label>

    <input type="radio" id="qunit2" name="project2" checked="checked">
    <label for="qunit2">QUnit</label>

    <input type="radio" id="color2" name="project2">
    <label for="color2">Color</label>
  </div>
</div>

于 2016-11-24T15:56:52.380 回答