Question

所以我有这个脚本输出一个下拉菜单，并使用新的颜色和图像刷新.box div。

HTML＆amp;爪哇：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<div>
  <select id="color">
    <option style="display: none;">Choose Color</option>
  </select>
</div>

<div class="red box">You have selected <strong>red option</strong> so i am here
  <img src="http://i46.tinypic.com/2epim8j.jpg" />
</div>
<div class="green box">You have selected <strong>green option</strong> so i am here
  <img src="http://i49.tinypic.com/28vepvr.jpg" />
</div>
<div class="blue box">You have selected <strong>blue option</strong> so i am here
  <img src="http://i50.tinypic.com/f0ud01.jpg" />
</div>

<script>
$(document).ready(function() {
  $("select").change(function() {
    $("select option:selected").each(function() {
      if ($(this).attr("value") == "Red") {
        $(".box").hide();
        $(".red").show();
      }
      if ($(this).attr("value") == "Green") {
        $(".box").hide();
        $(".green").show();
      }
      if ($(this).attr("value") == "Blue") {
        $(".box").hide();
        $(".blue").show();
      }
    });
  }).change();
});

var select = document.getElementById("color");
var options = ["Red", "Blue", "Green"];
for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
    }
</script>

CSS：

.box {
  padding: 20px;
  display: none;
  margin-top: 20px;
  border: 1px solid #000;
}
.box img {
  float: right;
  width: 150px;
  height: 100px;
}
.red {
  background: #ff0000;
}
.green {
  background: #00ff00;
}
.blue {
  background: #0000ff;
}

这一切都很美妙。

事情是，我想将其扩展到大约100个字段，手动操作既耗费又效率低（尽管CSS可能是手动的）。

所以我想做的是让我的脚本更具动态性，允许我创建一次颜色（在我建立的选项数组中），然后html和javascript将遍历它以显示它们的动作。

那么我想我的第一个问题是如何将我的html块转换成一个遍历我的选项数组的循环？

其次，我如何使用我的选项数组来简化我的代码？

谢谢

Answer 1

This other answer可以帮助您解决第一个问题。

第二，你想到这样的事情吗？

＆＃13;

/*  javascript/jQuery  */
$("select").change(function() {
    var sel = this.value;
    $('.box').hide();
    $('.'+sel).show();
});

var select = document.getElementById("color");
var options = ["red", "blue", "green"];
for(var i = 0; i < options.length; i++) {
  var opt = options[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  select.appendChild(el);
}

＆＃13;

/*  CSS:  */
.box {
  padding: 20px;
  display: none;
  margin-top: 20px;
  border: 1px solid #000;
}
.box img {
  float: right;
  width: 150px;
  height: 100px;
}
.red {
  background: #ff0000;
}
.green {
  background: #00ff00;
}
.blue {
  background: #0000ff;
}

＆＃13;

<!--  HTML:  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

    <div>
      <select id="color">
        <option style="display: none;">Choose Color</option>
      </select>
    </div>

    <div class="red box">You have selected <strong>red option</strong> so i am here
      <img src="http://i46.tinypic.com/2epim8j.jpg" />
    </div>
    <div class="green box">You have selected <strong>green option</strong> so i am here
      <img src="http://i49.tinypic.com/28vepvr.jpg" />
    </div>
    <div class="blue box">You have selected <strong>blue option</strong> so i am here
      <img src="http://i50.tinypic.com/f0ud01.jpg" />
    </div>

＆＃13;

Answer 2

尝试添加更多动态颜色和背景框

＆＃13;

var ColorBox ={
  colors: ['Red', 'Black'],
  init: function(){
     this.addColor();
     $('select#color').change(this.boxDisplay);
  
  },
  
  boxDisplay: function(){
    var color = $(this).val();
    $('.box').hide();
    $('.'+color).show().boxbackground(color);
  },
  
  addColor: function(){
     $.each( this.colors, function( idx, color ) {
       $('select#color').append( $('<option>',{
        value : color.toLowerCase(),
        text: color
       }))
     
     })
  }

};

$.fn.boxbackground = function( colorname ){
  elem = $(this);
  var colorcode;
  switch( colorname ){
     case 'red' : colorcode = '#FF4D49'; break;
     case 'black' : colorcode = '#000'; break;
  }
  
  elem.each( function(){
    $(this).css( 'background', colorcode );
  
  })

};
ColorBox.init();

＆＃13;

.box {
  padding: 20px;
  display: none;
  margin-top: 20px;
  border: 1px solid #000;
}
.box img {
  float: right;
  width: 150px;
  height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select id="color">
    <option style="display: none;">Choose Color</option>
  </select>
</div>
<div class="red box">You have selected <strong>red option</strong> so i am here
  <img src="http://i46.tinypic.com/2epim8j.jpg" />
</div>
<div class="black box">You have selected <strong>black option</strong> so i am here
  <img src="http://i46.tinypic.com/2epim8j.jpg" />
</div>

＆＃13;

制作Ajax＆amp; HTML（代码端）下拉动态

2 个答案: