2

こんにちは、魔女のフォームがあります。選択ボックスがいくつかあります。小さくて簡単な小さなjqueryプラグインを使用して、スタイルを設定します。

$.fn.extend({
customSelect : function(options) {

  if(!$.browser.msie || ($.browser.msie&&$.browser.version>6)){
  return this.each(function() {

        var outerClass = options.customClass,
            innerClass = options.customClass_inner;

        var currentSelected = $(this).find(':selected');
        var html = currentSelected.html();
        if(!html){ html=' '; }
        $(this).after('<span class="customStyleSelectBox"><span class="customStyleSelectBoxInner">'+html+'</span></span>').css({position:'absolute', opacity:0,fontSize:$(this).next().css('font-size')});
        var selectBoxSpan = $(this).next();
        var selectBoxWidth = parseInt($(this).width()) - parseInt(selectBoxSpan.css('padding-left')) -parseInt(selectBoxSpan.css('padding-right'));         
        var selectBoxSpanInner = selectBoxSpan.find(':first-child');
        selectBoxSpan.css({display:'inline-block'});
        selectBoxSpanInner.css({width:selectBoxWidth, display:'inline-block'});
        var selectBoxHeight = parseInt(selectBoxSpan.height()) + parseInt(selectBoxSpan.css('padding-top')) + parseInt(selectBoxSpan.css('padding-bottom'));
        $(this).height(selectBoxHeight).change(function(){
        selectBoxSpanInner.text($(this).find(':selected').text()).parent().addClass('changed');
        }); 
  });
  }
}
});
$('select').customSelect();

そして、それは問題ありません。問題は、広告をクリックすると、必要なだけ多くのボックスを選択するボタンもあるということです.(理由は気にしないでください:P) jquery のヘルプなので、動的に dom に追加しています。

したがって、私の問題は、これらの新しい選択ボックスがもちろんスタイルを継承しないことです。後でそれらをdomに追加するためであることはわかっていますが、onメソッドの助けを借りて誰が継承させることができますか?

助けてくれてありがとう！

4

2 に答える 2

1

もう一度電話すればいいだけ

$('select.newSelect').customSelect();

新しい選択をDOMに追加した後。customSelect() コードが新しく追加された要素にのみ適用されるように、固有のクラスを追加するように注意してください。そうしないと、イベントを 2 回アタッチすることになります。プラグインを一般化して、イベントを 2 回アタッチしないようにすることもできますが、それはより困難です (ヒントを使用してください.data()) 。

$('select.newSelect').customSelect();あなたができることを呼び出す場合に奇妙なことを避けるために

  if(!$.browser.msie || ($.browser.msie&&$.browser.version>6)){
  return this.each(function() {

  if($(this).data('customSelectApplied') !== ''){
        // whe already attached the custom functionality here
        return;
    }else{
        //continue as usual
        $(this).data('customSelectApplied', true);
于 2012-04-26T10:53:36.920 に答える
0

このon関数はここでは役に立ちません。新しい要素を追加するたびにその関数を呼び出すだけです:

$("<select id="aaa">").appendTo('#foo').customSelect();

1 つのクエリで新しい「select」を取得する場合:
DOM の準備が整った状態でこれを行います。

$(function(){
    $('select').customSelect().addClass('old');
});

そして後で

$('select:not(.old)').customSelect().addClass('old');

プラグインを変更してoldそのクラスを追加し、クラスの要素を無視することもできます。

$.fn.extend({
customSelect : function(options) {

  if(!$.browser.msie || ($.browser.msie&&$.browser.version>6)){
  return this.filter(':not(.old)').each(function() { // <==== ====== ===== ====== ===
        $(this).addClass('old'); // <==== ====== ===== ===== ====
        var outerClass = options.customClass,
            innerClass = options.customClass_inner;

        var currentSelected = $(this).find(':selected');
        var html = currentSelected.html();
        if(!html){ html='&nbsp;'; }
        $(this).after('<span class="customStyleSelectBox"><span class="customStyleSelectBoxInner">'+html+'</span></span>').css({position:'absolute', opacity:0,fontSize:$(this).next().css('font-size')});
        var selectBoxSpan = $(this).next();
        var selectBoxWidth = parseInt($(this).width()) - parseInt(selectBoxSpan.css('padding-left')) -parseInt(selectBoxSpan.css('padding-right'));         
        var selectBoxSpanInner = selectBoxSpan.find(':first-child');
        selectBoxSpan.css({display:'inline-block'});
        selectBoxSpanInner.css({width:selectBoxWidth, display:'inline-block'});
        var selectBoxHeight = parseInt(selectBoxSpan.height()) + parseInt(selectBoxSpan.css('padding-top')) + parseInt(selectBoxSpan.css('padding-bottom'));
        $(this).height(selectBoxHeight).change(function(){
        selectBoxSpanInner.text($(this).find(':selected').text()).parent().addClass('changed');
        }); 
  });
  }
}
});

次に、次のように使用します。

$('select').customSelect();

そして、「古い」は無視され<select>ます。

于 2012-04-26T10:55:30.033 に答える