3

実際のドロップダウンを使用する代わりに、リンクと（将来的には画像）をクリックしてオプションを選択できるようにすることで、ドレスアップしているドロップダウンオプションがたくさんあるフォームがあります。多くのドロップダウンがあり、ほとんどすべてが同じ基本的な考え方を繰り返します。いくつかは、異なる変数だけで文字通り繰り返されます。そのうちの 1 つの HTML を次に示します。

<tr class="box1">
  <td>
    <select id="cimy_uef_7">
      <option value="Boy">Boy</option>
      <option value="Girl">Girl</option>
    </select>
  </td>
</tr>

次に、対応する洗練されたリンクをクリックして、ドロップダウンで対応するオプションを選択します。

<div id="genderBox1">
  <div class="gender"><a class="boy" href="">Boy</a></div>
  <div class="gender"><a class="girl" href="">Girl</a></div>
</div>

したがって、リンク「Boy」をクリックすると、対応するドロップダウン値「Boy」が選択されます。複数の Box# があるため、新しい変数を使用して毎回 jQuery を繰り返すことができますが、確かにもっと短い方法があります。これを機能させるjQueryは次のとおりです。

//Box1 Gender
  var Gender1 = $('select#cimy_uef_7');
  var Boy1 = $("#genderBox1 .gender a.boy");
  var Girl1 = $("#genderBox1 .gender a.girl");

//On Page Load - Check Gender Box 1 Selection and addClass to corresponding div a
  if ( $(Gender1).val() == "Boy" ) {
    $(Boy1).addClass("selected");
    } else {
    $(Boy1).removeClass("selected");
    }

  if ( $(Gender1).val() == "Girl" ) {
    $(Girl1).addClass("selected");
    } else {
    $(Girl1).removeClass("selected");
    }

  //On Click - Change Gender Box 1 select based on image click
  $(Boy1).click(function(event) {
    event.preventDefault();
    $(this).addClass("selected");
    $(Gender1).val("Boy");
    $(Girl1).removeClass("selected");
  });

  $(Girl1).click(function(event) {
    event.preventDefault();
    $(this).addClass("selected");
    $(Gender1).val("Girl");
    $(Boy1).removeClass("selected");
  });

短縮するための私の考えは、ボックスごとに変数のリストを作成し、1、2、3、4 の数字を循環させ、jQuery に変数ごとに同じ # を取得させることでしたが、方法がわかりません。それをするために。

質問を改善するために他に提供できることがあれば教えてください。私はまだjQueryの初心者なので、これはこのコードを短くするための私の最良のアイデアですが、もっと良いアイデアが世の中にあると確信しています.

4

6 に答える 6

2

あなたはこれを試すことができます

$(function(){
    // Set selected class on load
    var currentVal=$('select#cimy_uef_7').val();
    fl=(currentVal[0]).toLowerCase();
    currentVal=fl+currentVal.substr(1);
    $('#genderBox1 .gender a.'+currentVal).addClass('selected');

    // Click handler
    $('#genderBox1 .gender a').on('click', function(e){
        e.preventDefault();
        $(this).parents('div#genderBox1').find('a').removeClass('selected');
        $(this).addClass('selected');
        $('select#cimy_uef_7').val($(this).text());
    });
});​

デモ。

更新:また、これを複数の選択で試したり、div で使用したりすることもdata-できます。

于 2012-10-27T05:18:30.653 に答える
2

まず、jQuery 呼び出しの結果を使用して変数をインスタンス化したら、jQuery 関数を再度呼び出す必要はありません。次に例を示します。

var Girl1 = $("#genderBox1 .gender a.girl");

もう呼び出す必要はありません。$(Girl1)呼び出すだけGirl1です。

jQuery 呼び出しは配列を返します。これは、一致する要素が複数ある場合に役立ちます。

var girls = $(".gender a.girl");

girlsaタグの配列になりました。それらはDOMの順序であると信じているので、それでうまくいくかもしれません。Chrome 開発者ツールや Firebug などを使って実行してみると、配列が表示されるはずです。

于 2012-10-27T04:52:10.497 に答える
2

こんにちは、考慮すべきことがたくさんあります

1) JS の変数名に lowerCamelCase を使用することをお勧めします

2) div を手動で行うのではなく、次のように動的に行います。

var genderSelect = $('select#cimy_uef_7'),
    genderOptions = genderSelect.children(),
    genderStyled = $('<div class="gender-styled-container"></div>');

genderOptions.each(function(i, option) {
    var newOption = $('<a href="#" class="option">' + option.innerText + '</a>');
    newOption.bind('click', function(evt) {
        evt.preventDefault();
        genderStyled.children('.option').removeClass('selected');
        newOption.addClass('selected');
        genderSelect
            .find('option:selected')
                .removeAttr('selected')
                .end()
            .find(option).attr('selected', 'selected');
    });
    genderStyled.append(newOption);
});
genderSelect.hide().after(genderStyled);

3) http://jsfiddle.net/Uz6cV/で実装された例

なんで？一方で、選択ボックスとして引き続き動作する必要があり、他方で、新しい UI のオプションを選択のオプションに依存させる必要があるため (ユーザーに、選択ボックスではないオプションを表示したくない)現在選択されているため、送信できません)。

最後の行の hide() を削除して、選択内容と、新しいオプションをクリックしたときにどのように変化するかを確認します。

于 2012-10-27T04:55:43.143 に答える
2

これが一般化された解決策です。

次のように HTML を作成し、アンカー ("Boy" / "Girl") に含まれるテキストが対応するメニュー オプションの値と正確に一致するようにします。

HTML:

<tr class="box1">
  <td>
    <select class="remoteSelectable" id="cimy_uef_7">
      <option value="Boy">Boy</option>
      <option value="Girl">Girl</option>
    </select>
  </td>
</tr>

<div id="genderBox1" class="remoteSelector" data-menu="cimy_uef_7">
  <div class="gender"><a href="">Boy</a></div>
  <div class="gender"><a href="">Girl</a></div>
</div>

JavaScript:

//force select menus to same value as clicked remote link
$(".remoteSelector a").on('click', function(e) {
    e.preventDefault();
    var $this = $(this).addClass('selected'),
        $container = $this.closest(".remoteSelector");
    $container.find("a").not(this).removeClass('selected');
    $('#' + $container.data('menu')).val($this.text());
});

//force remote links to reflect value of selected menu option
$(".remoteSelectable").on('change', function() {
    var $this = $(this);
    $(".remoteSelector").filter(function() {
        return $(this).data('menu') == $this.attr('id');
    }).find("a").removeClass('selected').filter(function() {
        return $(this).text() == $this.val();
    }).addClass('selected');
}).trigger('change');

デモ

ノート ：

  • 「変更」ハンドラーがすぐにトリガーされ、正しいリモート リンクが「選択」されたスタイルになります。

  • 選択メニューは、絶対配置で画面外に移動するか、display:none送信されるフォームの一部でない場合は非表示にすることができます。

任意の時点 (ハンドラーがアタッチされた後) でメニューをプログラムで変更する必要がある場合は、次のように変更して、対応するリモート リンクが最新の状態に保たれるようにします。

$("#cimy_uef_7").val('Girl').trigger('change');
于 2012-10-27T08:03:26.833 に答える
0

フィドル - http://jsfiddle.net/tariqulazam/aadDL/

以下のようにHTMLを変更します。リンクに性別クラスが追加されていることに注意してください。クラスと関連要素の命名の背後にある全体的な考え方は、それらを簡単に参照できるようにすることです。

<tr class="box1">
  <td>
    <select id="cimy_uef_7">
      <option value="Boy">Boy</option>
      <option value="Girl">Girl</option>
    </select>
  </td>
</tr>


<div id="genderBox1">
  <div><a class="gender Boy" href="">Boy</a></div>
  <div><a class="gender Girl" href="">Girl</a></div>
</div>

そして、これは同じことを行う改訂されたjqueryコードです

$(".gender").click(function(event){
    event.preventDefault();
    $("#cimy_uef_7 option:contains("+ $(this).text() +")").attr('selected','selected');
});

$("#cimy_uef_7").change(function(){
    $(".gender").removeClass('selected');
    $("a." + $(this).val()).addClass('selected');
});
于 2012-10-27T05:03:05.150 に答える
0

次のコードブロック

//On Click - Change Gender Box 1 select based on image click
  $(Boy1).click(function(event) {
    event.preventDefault();
    $(this).addClass("selected");
    $(Gender1).val("Boy");
    $(Girl1).removeClass("selected");
  });

  $(Girl1).click(function(event) {
    event.preventDefault();
    $(this).addClass("selected");
    $(Gender1).val("Girl");
    $(Boy1).removeClass("selected");
  });

で置き換えることができます

$("#genderBox1 .gender a").click(function(event){
    event.preventDefault();
    $("#genderBox1 .gender a").removeClass("selected");
    $(this).addClass("selected");
    Gender1.val($(this).html());
});

デモ

于 2012-10-27T04:52:28.143 に答える