Question

我正在尝试在我的jquery中使用它，以便我可以使用相同的类，但效果彼此独立

这是我正在努力的小提琴

当您选择选项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的新手，所以如果你能告诉我那个很棒的小提琴！

谢谢你！

Answer 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();

Answer 2

提供相对于$(this)元素的上下文：

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

JS Fiddle demo

此外您的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 Fiddle demo

最后，因为有时我只想使用三元运算符：

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

JS Fiddle demo

Answer 3

看看我的fiddle。我在select和us属性中添加了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>

第二个选择只有for="b"，第二个div有id="b"

如果选择了值，则将此选项用于输入选项，然后执

3 个答案: