2017-02-01 11 views
1

私は2つの異なるdivの中に2つのカラーピッカーを持っています。スペクトルカラーピッカーの親要素IDを取得

<div class="panel-heading" style="width:100%" id="h1"> 
<span style="float:right; padding-right:10px;" class="close"> <input type='text' class="basic" id="t1"/> </span> 
</div> 

<div class="panel-heading" style="width:100%" id="h2"> 
<span style="float:right; padding-right:10px;" class="close"> <input type='text' class="basic" id="t2"/> </span> 
</div> 

と、これは私のスペクトルチャートピッカーJSです:どのように私は私が選択しているカラーピッカーのdivを知ってもらうことができます(私は変更しようとしています

$(document).ready(function() { 
      $(".basic").spectrum({ 
       color: "rgb(244, 204, 204)", 
       showPaletteOnly: true, 
       hideAfterPaletteSelect: true, 
       change: function (color) 
       { 
        setBackgroundColor(color); 
       }, 
       palette: [ 
        ["rgba(168, 255, 102, 0.29)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", 
        "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"], 
        ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", 
        "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"] 
        ] 
      }); 
}); 

今setBackgroundColor内部()関数。 divの背景色) つまりH1またはH2です。

注:jqueryで入力IDを$("#t1").spectrumとして送信しません。

私を助けてください。前もって感謝します。

+1

使用' $(この).parent():

これは、親BGCOLORを変更する方法です。 –

+0

ありがとうございます。 'this'キーワードが解決策です。 – karz

答えて

0

みんなありがとうを述べたように。 `あなたが選択しているカラーピッカーのdiv取得する

change: function (color) 
{ 
    $(this).parent().parent().css('background',color); 
}, 
1

thisを使用できますが、プラグインが.basic要素に関連付けられているため、入力要素が取り込まれます。自身がちょうど.parent()または.closest()を使用する親を取得するには:

$(".basic").spectrum({ 
    color: "rgb(244, 204, 204)", 
    showPaletteOnly: true, 
    hideAfterPaletteSelect: true, 
    change: function (color) { 
     // use this 
     console.log(this); // will show <input type='text' class="basic" id="t1"/> 
     // to access parent element use .closest 
     console.log($(this).closest('.panel-heading')); 
     // or 
     console.log($(this).closest('.close')); 
     setBackgroundColor(color); 
    },     
}); 
1

を多分これはあなたのために動作します。フォーカス機能付き

$("#h1").focus(function() { 
    //code when div #h1 focused 
}); 

$("#h2").focus(function() { 
    //code when div #h2 focused 
}); 

または

this 

Norlihazmeyガザーリーは、あなたの助けのための