根据选择值显示div

时间：2015-08-12 17:05:34

标签： jquery

我有5组具有常见类名的div。我需要根据select元素的值显示子div，它也在子div下。但绝对没有任何事情发生。我做错了什么？

$('.item-chooser').each(function() {
  var media = $(this).val();
  if (media == 'fontawesome') {
    $(this).parent('.cta-block').children('.cta-fa-icon').slideDown();
  } else if (media == 'image') {
    $(this).parent('.cta-block').children('.cta-image-upload').slideDown();
  }
  $(this).change(function() {
    var media = $(this).val();
    if (media == 'fontawesome') {
      $(this).parent('.cta-block-item-wrap').children('.cta-image-upload').slideUp();
      $(this).parent('.cta-block-item-wrap').children('.cta-fa-icon').slideDown();
    } else if (media == 'image') {
      $(this).parent('.cta-block-item-wrap').children('.cta-fa-icon').slideUp();
      $(this).parent('.cta-block-item-wrap').children('.cta-image-upload').slideDown();
    }
  });
});
.cta-block-item-wrap {
  border-bottom: 1px solid #eeeeee;
  padding: 10px 0;
}
.cta-image-upload,
.cta-fa-icon {
  display: none;
}
.cta-block-item-wrap > label {
  font-size: 12px;
  font-weight: bold;
  margin: 0 50px 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cta-block">
  <div class="cta-block-item-wrap cta-icon-image">
    <label for="item-chooser">FA Icon/Image:</label>
    <select class="item-chooser" name="item-chooser">
      <option value="fontawesome">FontAwesome Icon</option>
      <option value="image">Image</option>
    </select>
  </div>
  <div class="cta-block-item-wrap cta-image-upload">
    <label for="block-image">Upload Image:</label>
    <input name="block-image" class="block-image" type="text" value="">
    <input type="button" class="cta-insert-image button button-primary button-large" value="Upload">
  </div>
  <div class="cta-block-item-wrap cta-fa-icon">
    <label for="fa-icon-class">Choose FA Icon:</label>
    <input type="text" name="fa-icon-class" class="fa-icon-class" value="">
  </div>
</div>

<div class="cta-block">
  <div class="cta-block-item-wrap cta-icon-image">
    <label for="item-chooser">FA Icon/Image:</label>
    <select class="item-chooser" name="item-chooser">
      <option value="fontawesome">FontAwesome Icon</option>
      <option value="image">Image</option>
    </select>
  </div>
  <div class="cta-block-item-wrap cta-image-upload">
    <label for="block-image">Upload Image:</label>
    <input name="block-image" class="block-image" type="text" value="">
    <input type="button" class="cta-insert-image button button-primary button-large" value="Upload">
  </div>
  <div class="cta-block-item-wrap cta-fa-icon">
    <label for="fa-icon-class">Choose FA Icon:</label>
    <input type="text" name="fa-icon-class" class="fa-icon-class" value="">
  </div>
</div>

2 个答案:

答案 0 :(得分：4)

首先，您正在使用parent()从.item-chooser遍历到.cta-block。但parent()只在DOM中的单个级别上移动，.cta-block不是.item-chooser的直接父级。我建议改用parents()或closest()。

  

.parent（）仅在DOM树上传递单个级别

我还将children()替换为find()以获得灵活性，并将it may to be a bit faster替换为您的上下文，但您的children()选择器也可以使用。

$(this).closest('.cta-block').find('.cta-fa-icon').slideDown();

第二次，您正在遍历每个.item-chooser以设置初始状态和绑定事件侦听器。我建议通过绑定＆＃34;更改＆＃34;来简化事情。事件处理程序，然后触发更改：

$('.item-chooser').on('change',function() { .. }).trigger('change');

第三次，当您向下滑动另一个选项时，您不会向上滑动一个选项。您似乎想在显示图标输入时隐藏文件输入，反之亦然：

$(this).closest('.cta-block').find('.cta-fa-icon').slideDown();
$(this).closest('.cta-block').find('.cta-image-upload').slideUp();

请参阅下面的演示：

＆＃13;
＆＃13; 
$('.item-chooser').on('change', function() {
  var media = $(this).val();
  if (media == 'fontawesome') {
    $(this).closest('.cta-block').find('.cta-fa-icon').slideDown();
    $(this).closest('.cta-block').find('.cta-image-upload').slideUp();
  } else if (media == 'image') {
    $(this).closest('.cta-block').find('.cta-image-upload').slideDown();
    $(this).closest('.cta-block').find('.cta-fa-icon').slideUp();
  }
}).trigger('change');
＆＃13; 
.cta-block-item-wrap {
  border-bottom: 1px solid #eeeeee;
  padding: 10px 0;
}
.cta-image-upload,
.cta-fa-icon {
  display: none;
}
.cta-block-item-wrap > label {
  font-size: 12px;
  font-weight: bold;
  margin: 0 50px 0 0;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cta-block">
  <div class="cta-block-item-wrap cta-icon-image">
    <label for="item-chooser">FA Icon/Image:</label>
    <select class="item-chooser" name="item-chooser">
      <option value="fontawesome">FontAwesome Icon</option>
      <option value="image">Image</option>
    </select>
  </div>
  <div class="cta-block-item-wrap cta-image-upload">
    <label for="block-image">Upload Image:</label>
    <input name="block-image" class="block-image" type="text" value="">
    <input type="button" class="cta-insert-image button button-primary button-large" value="Upload">
  </div>
  <div class="cta-block-item-wrap cta-fa-icon">
    <label for="fa-icon-class">Choose FA Icon:</label>
    <input type="text" name="fa-icon-class" class="fa-icon-class" value="">
  </div>
</div>

<div class="cta-block">
  <div class="cta-block-item-wrap cta-icon-image">
    <label for="item-chooser">FA Icon/Image:</label>
    <select class="item-chooser" name="item-chooser">
      <option value="fontawesome">FontAwesome Icon</option>
      <option value="image">Image</option>
    </select>
  </div>
  <div class="cta-block-item-wrap cta-image-upload">
    <label for="block-image">Upload Image:</label>
    <input name="block-image" class="block-image" type="text" value="">
    <input type="button" class="cta-insert-image button button-primary button-large" value="Upload">
  </div>
  <div class="cta-block-item-wrap cta-fa-icon">
    <label for="fa-icon-class">Choose FA Icon:</label>
    <input type="text" name="fa-icon-class" class="fa-icon-class" value="">
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

修改

或者，您可以将div的类命名为与您的选择值相对应。然后，您可以通过删除if语句来进一步简化代码。

<div class="cta-option cta-option-image"></div>
<div class="cta-option cta-option-fontawesome"></div>

$container.find('.cta-option').slideUp();
$container.find('.cta-option-'+option).stop(true).slideDown();

请参阅下面的工作演示：

＆＃13;
＆＃13; 
$('.item-chooser').on('change', function() {
  
  var $this=$(this),
      $container=$this.closest('.cta-block'),
      option = $this.val();
      
  
  $container.find('.cta-option').slideUp();
  $container.find('.cta-option-'+option).stop(true).slideDown();

}).trigger('change');
＆＃13; 
.cta-block-item-wrap {
  border-bottom: 1px solid #eeeeee;
  padding: 10px 0;
}
.cta-option {
  display: none;
}
.cta-block-item-wrap > label {
  font-size: 12px;
  font-weight: bold;
  margin: 0 50px 0 0;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cta-block">
  <div class="cta-block-item-wrap cta-icon-image">
    <label for="item-chooser">FA Icon/Image:</label>
    <select class="item-chooser" name="item-chooser">
      <option value="fontawesome">FontAwesome Icon</option>
      <option value="image">Image</option>
    </select>
  </div>
  <div class="cta-block-item-wrap cta-option cta-option-image">
    <label for="block-image">Upload Image:</label>
    <input name="block-image" class="block-image" type="text" value="">
    <input type="button" class="cta-insert-image button button-primary button-large" value="Upload">
  </div>
  <div class="cta-block-item-wrap cta-option cta-option-fontawesome">
    <label for="fa-icon-class">Choose FA Icon:</label>
    <input type="text" name="fa-icon-class" class="fa-icon-class" value="">
  </div>
</div>

<div class="cta-block">
  <div class="cta-block-item-wrap cta-icon-image">
    <label for="item-chooser">FA Icon/Image:</label>
    <select class="item-chooser" name="item-chooser">
      <option value="fontawesome">FontAwesome Icon</option>
      <option value="image">Image</option>
    </select>
  </div>
  <div class="cta-block-item-wrap cta-option cta-option-image">
    <label for="block-image">Upload Image:</label>
    <input name="block-image" class="block-image" type="text" value="">
    <input type="button" class="cta-insert-image button button-primary button-large" value="Upload">
  </div>
  <div class="cta-block-item-wrap cta-option cta-option-fontawesome">
    <label for="fa-icon-class">Choose FA Icon:</label>
    <input type="text" name="fa-icon-class" class="fa-icon-class" value="">
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

使用.children()时，您的层次结构错误。您应该使用.siblings()。

cta-image-upload和cta-fa-icon是cta-block-item-wrap（item_chooser的父母）的兄弟姐妹，而不是孩子。

前$(this).parent('.cta-block-item-wrap').siblings('.cta-image-upload').slideUp();

相关问题
最新问题