0

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

这是我正在做的小提琴

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

正如您选择选项 3 时一样，两个选择标签都会出现“嘿”这个词，但我希望它使用同一个类彼此独立。

我想我可以使用类似的东西来做到这一点

 $(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

提供相对于$(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 回答
0

看看我的小提琴。我向for="someid"select 添加了一个属性，我们使用该属性来识别 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"

于 2013-03-21T22:16:09.573 回答