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

ボタンセットの組み込みイベントbuttonsetcreateを使用した非常にエレガントなソリューションがあります。または、ボタンセットのコールバック イベントを使用できます。ここで説明されているすべてhttps://api.jqueryui.com/buttonset/#event-create

このイベントにより、ボタンセットが開始されるたびに、好きなことを行うことができます。初期化されているかどうかを確認するために何度も確認する必要はありません。コードを入力するだけ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 に答える