0

同じクラスを使用できますが、互いに独立した効果を持つように、jqueryでこれを使用しようとしています

ここに私が取り組んでいるフィドルがあります

http://jsfiddle.net/d0okie0612/ThnKc/

オプション3を選択すると、両方の選択タグにHEYという単語が出てきますが、同じクラスを使用して互いに独立させたいです。

次のようなものを使用してこれを行うことができると思います

 $(this).children('div.custom_size').fadeIn()

しかし、うまくいかないようで、長い間立ち往生してイライラしていました

htmlはこちら

 <select id="print_size_options_LargeFormatBlackWhite">
   <option value="">1</option>
   <option value="">2</option>
   <option value="customSize">3</option>
 </select>

 <div class="custom_size" style="display: none;">
   Hello
 </div>

 <br />
 <br />
 <br />
 <select id="print_size_options_LargeFormatBlackWhite">
   <option value="">1</option>
   <option value="">2</option>
   <option value="customSize">3</option>
 </select>

 <div class="custom_size" style="display: none;">
   Hello
 </div>

Jqueryはこちら

  $("#print_size_options_LargeFormatBlackWhite").change(function(evt) {
    var selected;
    selected = $(this).val();
    if (selected === "customSize") {
      return $(".custom_size").fadeIn();
  } else {
     return $(".custom_size").fadeOut();
  }
   }).change();

私はjQueryが初めてなので、フィドルで私を見せていただければ、それは素晴らしいことです!

みんなありがとう！

4

3 に答える 3

1

これが役に立ちますように。id 要素に対して一意である必要があると思います

http://jsfiddle.net/sUuqd/1/

$(".print_size_options_LargeFormatBlackWhite").change(function(evt) {
 var selected;
 selected = $(this).val();
 if (selected === "customSize") {
    return $(this).parent().find(".custom_size").fadeIn();
  } else {
return $(this).parent().find(".custom_size").fadeOut();
 }
}).change();
于 2013-03-21T22:12:52.963 に答える
0

私のフィドルを見てください。select に属性を追加し、for="someid"その属性を使用して、select が表す div を識別します。

私のjsは次のようになります：

$("select").change(function(evt) {
  var selected;
  selected = $(this).val();
  if (selected === "customSize") {
    return $(".custom_size#"+$(this).attr("for")).fadeIn();
  } else {
    return $(".custom_size#"+$(this).attr("for")).fadeOut();
  }
}).change();

そしてそのようなhtml：

<select id="print_size_options_LargeFormatBlackWhite" for="a">
   <option value="">1</option>
    <option value="">2</option>
    <option value="customSize">3</option>
</select>

<div id="a" class="custom_size" style="display: none;">
    Hello
</div>

2番目のselectにはaがfor="b"あり、2番目のdivにはaがありますid="b"

于 2013-03-21T22:16:09.573 に答える
0

$(this)要素に関連するコンテキストを提供します。

  if (selected === "customSize") {
    return $(this).next(".custom_size").fadeIn();
  } else {
    return $(this).next(".custom_size").fadeOut();
  }

JS フィドルのデモ。

また、無効な HTML がid あり、ドキュメント内で一意である必要があるselectため、代わりに要素にクラス名を使用する必要があります。

<select class="print_size_options_LargeFormatBlackWhite">
<!-- removed for brevity -->
</select>
<div class="custom_size" style="display: none;">Hello</div>
<!-- removed for brevity -->
<select class="print_size_options_LargeFormatBlackWhite">
<!-- removed for brevity -->
</select>
<div class="custom_size" style="display: none;">Hello</div>

jQuery の場合:

$(".print_size_options_LargeFormatBlackWhite").change(function (evt) {
    var selected = $(this).val();
    $(this).next('.custom_size')[selected === 'customSize' ? 'fadeIn' : 'fadeOut']();
}).change();

JS フィドルのデモ。

最後に、三項演算子を使いすぎてしまうことがあります。

$(".print_size_options_LargeFormatBlackWhite").change(function (evt) {
    var selected = $(this).val();
    $(this).next('.custom_size')[selected === 'customSize' ? 'fadeIn' : 'fadeOut']();
}).change();

JS フィドルのデモ。

于 2013-03-21T22:07:28.947 に答える