1

選択フィールドの値に基づいて、特定のクラスが追加または削除される小さなインターフェースビルダーをまとめようとしています。

jquery を作成して、任意の選択フィールドを参照し、その選択ボックスからクラスを削除/追加するだけで、jquery の選択 ID を削除する必要はありません。

現在、textcolour、backgroundcolour、arrowdirection の 3 つの選択ボックスがあります。

これまでの私のスクリプトは次のとおりです

$('select').change(function()
{
    var thisname = $(this).attr('name'),
        thisselect = $(this).val();


    $('#arrowlink').removeClass(thisname).val();
    $("#arrowlink").addClass(thisselect).val();

});

これまでのところ、 http://cdpn.io/nvGuH

ありがとう

4

2 に答える 2

2

2つの解決策を紹介します：

  • 既存の CSS でロジックを使用するもの
  • CSS なし (! はい、なし !)

次のようなselect 名前とoptions 値があるとします。

  <select name="bg">
    <option value="">Background</option>
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="blue">blue</option>    
  </select>

  <select name="color">
    <option value="">Color</option>
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="blue">blue</option>    
  </select>

選択した名前と値 (存在する場合) を取得し、次のように配列内で結合します (選択後の例)。

["bg-red", "color-blue"]

その配列をクラスとして設定するには、CSS 内でこれらすべてのクラスを準備する必要があります。

.bg-red{  
  background:red; 
}
.bg-blue{  
  background:blue; 
}
.bg-green{  
  background:green; 
}

.color-red{  
  color:red; 
}
.color-blue{  
  color:blue; 
}
.color-green{  
  color:green; 
}

.attr('class', classesArr.join(' '))すべての要素の目的のクラスを再構築するために使用できるよりも。

LIVE DEMO

function createClasses( element ){

  var classesArr = []; // array to store all the classes

  $('select').each(function(){
     var myVal  = this.value;  // get the value // blue, red, green
     if(myVal.length)          // it there's a value join the value with the select name, ex: bg-blue, bg-red .... or color-blue, color-red ....
        classesArr.push( this.name +'-'+ this.value );
  });

  console.log(classesArr);  // open console to see what happens!
  $(element).attr('class', classesArr.join(' ') ); // rebuild all the new classes

}



$("select").on("change", function(){
    createClasses( "#arrowlink" );    // run function and pass as argument the desired element to play with
});

編集：最も簡単な解決策！

なぜこれらすべてのクラスに煩わされているのかわかりませんので、次の簡単なトリックを使用して、これらすべてのクラスを作成する際の頭痛の種を取り除くことをお勧めします。

LIVE DEMO

CSS:

CSSなし!!!!!

HTML:

  <div id="arrowlink">ARROW LINK</div>

  Please set:

  <select name="background-color">
    <option value="">Background</option>
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="blue">blue</option>    
  </select>

  <select name="color">
    <option value="">Font Color</option>
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="blue">blue</option>    
  </select>

  <select name="font-size">
    <option value="">Size</option>
    <option value="9">9</option>
    <option value="12">12</option>
    <option value="18">18</option>
    <option value="24">24</option>  
  </select>

jQuery の.css()メソッドの例のオブジェクトを作成します。

function createClasses( element ){
  var classesArr = {};
  $('select').each(function(){
     var myVal  = this.value ;
     if(myVal.length) classesArr[this.name] = this.value;
  });
  console.log(classesArr);  
  $(element).css(classesArr);
}

$("select").on("change", function(){
    createClasses( "#arrowlink" );
});
于 2013-04-22T22:16:04.523 に答える
0

クラスを選択した値と等しくなるように設定するだけの場合は、次のようにしてください。

$("select").on("change", function(){
    var val = this.value;
    $("#arrowlink").attr("class", val);
});
于 2013-04-22T21:45:10.537 に答える