问题一... IDS是独一无二的。它们应该仅附加到一个元素和一个元素。

Question

我想让这些产品出现在我的网站上。我想在选择列表中选择图像时显示图像。因此，当我选择“靴子”时，我的网站上会出现一个靴子图像。我想如果我将图像设置为隐藏在html中，然后如果选择使用javascript中的if语句将特定图像取消隐藏。任何帮助我似乎无法让javascript工作。感谢。

HTML：

<div id="product1">
    <img src="Jersey.jpg" style="visibility:hidden;" />
</div>

<div id="product2">
    <img src="boots.png" style="visibility:hidden;" />
</div>

<td class="inputcell">
      <select name="prod" id="prod">
          <option id="product1" value="0">Products from Sports World</option>
          <option id="product2" value="50.00">Jersey ($50.00)</option>
          <option id="product1" value="45.50">Boots ($45.50)</option>   
      </select>
</td>

JavaScript的：

for (var i = 0; i < products.length; i++) 
{
    if (products[i].id == selected_id){

    }
}

Answer 1

问题一... IDS是独一无二的。它们应该仅附加到一个元素和一个元素。

问题二，即使你得到“products.length”

3 <img src="boots.png" id='boots' class='catimg'/>

不要使用内联样式

将id应用于其他图像以及catimg类。那么您应该将名称属性应用于列表项

$("#myselect").on("change",function(){
 var name = $(this).val();
   if(!$(this).hasClass("active")){
      $('.active').hide(0).removeClass('active');
      $("#" + name).show(0).addClass("active");
  }

 })

Answer 2

使用此：

$('select option').click(function () { // on a click on option..
   if($(this).val() == '50.00') { // jersey selected
     $('.jersey').show();
   } else if($(this).val() == '50.00') {
     $('.boots').show(); // hide images on your own! :) 
   }
}

而且，改变这些：

<img src="boots.png" style="visibility:hidden; img/>

对于这些：

<img src="boots.png" class="boots" style="display: none;"/>

对于球衣图像来说类似的东西，一旦选择了正确的选项，确保它可见！

图像和选择列表javascript

2 个答案:

问题一... IDS是独一无二的。它们应该仅附加到一个元素和一个元素。