根据选择值显示 div [英] Display div based on select value

查看：32
本文介绍了根据选择值显示 div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

$('.item-chooser').each(function() {var media = $(this).val();如果(媒体 == 'fontawesome'){$(this).parent('.cta-block').children('.cta-fa-icon').slideDown();}否则如果(媒体=='图像'){$(this).parent('.cta-block').children('.cta-image-upload').slideDown();}$(this).change(function() {var media = $(this).val();如果(媒体 == 'fontawesome'){$(this).parent('.cta-block-item-wrap').children('.cta-image-upload').slideUp();$(this).parent('.cta-block-item-wrap').children('.cta-fa-icon').slideDown();}否则如果(媒体=='图像'){$(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 {边框底部:1px 实心 #eeeeee;填充:10px 0;}.cta-图像上传，.cta-fa-icon {显示:无；}.cta-block-item-wrap >标签 {字体大小:12px；字体粗细:粗体；边距: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 图标/图片:</label><select class="item-chooser" name="item-chooser"><option value="fontawesome">FontAwesome Icon</option><option value="image">图片</option></选择>

<div class="cta-block-item-wrap cta-image-upload"><label for="block-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="上传">

<div class="cta-block-item-wrap cta-fa-icon"><label for="fa-icon-class">选择 FA 图标:</label><input type="text" name="fa-icon-class" class="fa-icon-class" value="">

<div class="cta-block"><div class="cta-block-item-wrap cta-icon-image"><label for="item-chooser">FA 图标/图片:</label><select class="item-chooser" name="item-chooser"><option value="fontawesome">FontAwesome Icon</option><option value="image">图片</option></选择>

<div class="cta-block-item-wrap cta-image-upload"><label for="block-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="上传">

<div class="cta-block-item-wrap cta-fa-icon"><label for="fa-icon-class">选择 FA 图标:</label><input type="text" name="fa-icon-class" class="fa-icon-class" value="">

解决方案

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

<块引用>

.parent() 只在 DOM 树上向上移动一层

我还用 children() 替换了 children()="https://api.jquery.com/find/" rel="nofollow noreferrer">find() 灵活性，因为 在您的上下文中可能会更快，但是您的 children() 选择器也能工作.

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

第二，您正在遍历每个.item-chooser 以设置初始状态并绑定一个事件侦听器.我建议通过绑定更改"事件处理程序然后触发更改来简化事情:

$('.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();

<小时>

请看下面我的演示:

$('.item-chooser').on('change', function() {var media = $(this).val();如果(媒体 == 'fontawesome'){$(this).closest('.cta-block').find('.cta-fa-icon').slideDown();$(this).closest('.cta-block').find('.cta-image-upload').slideUp();}否则如果(媒体=='图像'){$(this).closest('.cta-block').find('.cta-image-upload').slideDown();$(this).closest('.cta-block').find('.cta-fa-icon').slideUp();}}).trigger('change');

.cta-block-item-wrap {边框底部:1px 实心 #eeeeee;填充:10px 0;}.cta-图像上传，.cta-fa-icon {显示:无；}.cta-block-item-wrap >标签 {字体大小:12px；字体粗细:粗体；边距: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 图标/图片:</label><select class="item-chooser" name="item-chooser"><option value="fontawesome">FontAwesome Icon</option><option value="image">图片</option></选择>

<div class="cta-block-item-wrap cta-image-upload"><label for="block-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="上传">

<div class="cta-block-item-wrap cta-fa-icon"><label for="fa-icon-class">选择 FA 图标:</label><input type="text" name="fa-icon-class" class="fa-icon-class" value="">

<div class="cta-block"><div class="cta-block-item-wrap cta-icon-image"><label for="item-chooser">FA 图标/图片:</label><select class="item-chooser" name="item-chooser"><option value="fontawesome">FontAwesome Icon</option><option value="image">图片</option></选择>

<div class="cta-block-item-wrap cta-image-upload"><label for="block-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="上传">

<div class="cta-block-item-wrap cta-fa-icon"><label for="fa-icon-class">选择 FA 图标:</label><input type="text" name="fa-icon-class" class="fa-icon-class" value="">

<小时>

编辑

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

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

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

查看下面的工作演示:

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

.cta-block-item-wrap {边框底部:1px 实心 #eeeeee;填充:10px 0;}.cta 选项 {显示:无；}.cta-block-item-wrap >标签 {字体大小:12px；字体粗细:粗体；边距: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 图标/图片:</label><select class="item-chooser" name="item-chooser"><option value="fontawesome">FontAwesome Icon</option><option value="image">图片</option></选择>

<div class="cta-block-item-wrap cta-option cta-option-image"><label for="block-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="上传">

<div class="cta-block-item-wrap cta-option cta-option-fontawesome"><label for="fa-icon-class">选择 FA 图标:</label><input type="text" name="fa-icon-class" class="fa-icon-class" value="">

<div class="cta-block"><div class="cta-block-item-wrap cta-icon-image"><label for="item-chooser">FA 图标/图片:</label><select class="item-chooser" name="item-chooser"><option value="fontawesome">FontAwesome Icon</option><option value="image">图片</option></选择>

<div class="cta-block-item-wrap cta-option cta-option-image"><label for="block-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="上传">

<div class="cta-block-item-wrap cta-option cta-option-fontawesome"><label for="fa-icon-class">选择 FA 图标:</label><input type="text" name="fa-icon-class" class="fa-icon-class" value="">

I have a 5 sets of divs with common class names. I need to display child divs based on the value of the select element, which is also under a child div. But absolutely nothing is happening. What am I doing wrong?

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

解决方案

First, you are using parent() to traverse from .item-chooser to .cta-block. But parent() only travels up a single level in the DOM and .cta-block is not the direct parent of .item-chooser. I suggest using parents() or closest() instead.

.parent() only travels a single level up the DOM tree

I have also replaced children() with find() for flexibility and because it may to be a bit faster in your context , but your children() selector works, too.

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

Second, you are iterating through each .item-chooser to set the initial state and bind an event listener. I suggest simplifying things by binding a "change" event handler and then triggering a change:

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

Third, you are not sliding up one option when you slide down another. It seems that you'd want to hide the file input when you show the icon input, and vice versa:

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

See my demonstration below:

$('.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');

.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>

EDIT

Alternatively, you could name the classes of your divs to correspond with your select values. Then you can simplify your code even further by removing the if statement.

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

See the working demo below:

$('.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');

.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;
}

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

这篇关于根据选择值显示 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆