使用选择选项下拉更改图像，但是对于多个事件？

时间：2016-01-07 04:32:13

标签： javascript jquery html forms select

使用JQuery来更改select上的图像，代码可以在一个表单上运行，但是如果我尝试将同一个东西应用到另一个表单，那么JQuery就不起作用了。需要实现这一个基础，我可以使用相同的代码来更改单个选择。

随意运行代码并查看我的意思，第一项有效，将选项更改为红色，图像更改，尝试与下一项相同，尽管它以相同的方式编写，但没有运气。< / p>

如果您还需要其他任何信息，请提前致谢。

$(function(){
  $("#colour").on('change', function(){
    $("#imageToSwap").attr("src", $(this).find(":selected").attr("data-src"));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

	<ul class="shelf">
		<li class="simpleCart_shelfItem">
	    	<img id="imageToSwap" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png" />
	   		<h4 class="item_name">C&amp;J Wash Bag</h4>
	    	<span class="item_price">£30.00</span>
	   <select id="colour">
    <option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png">Black</option>
    <option value="Red" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagRed.png">Red</option>
</select>
	    	<select class="item_quantity">
				<option value="0">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>	
			</select>
	    	<input type="hidden" class="item_shipping" value="0" />
	    	<input type="button" class="item_add" value="Add To Basket" />
		</li>

		<li class="simpleCart_shelfItem">
	    	<img id="imageToSwap" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png" />
	   		<h4 class="item_name">C&amp;J Wool Lined Gloves</h4>
	    	<span class="item_price">£28.00</span>
	    	 <select id="colour">
    <option value="Brown" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png">Brown</option>
    <option value="Tan" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesTan.png">Tan</option>
    <option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBlack.png">Black</option>
    <option value="Grey" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesGrey.png">Grey</option>
</select>
	    	<select required class="item_quantity">
				<option value="0">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>	
			</select>
	    	<input type="hidden" class="item_shipping" value="0" />
	    	<input type="button" class="item_add" value="Add To Basket" />
		</li></ul>

3 个答案:

答案 0 :(得分：1)

给多个元素赋予相同的id是件坏事。多个元素使用相同的ID。让它独一无二。

您可以使用class而不是id。就像在这里我给colour类并使用兄弟选择器更改图像。

$(function(){
  $(".colour").on('change', function(){
       $(this).siblings(".item_thumb").attr("src", $(this).find(":selected").attr("data-src"));
  });
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

	<ul class="shelf">
		<li class="simpleCart_shelfItem">
	    	<img id="imageToSwap" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png" />
	   		<h4 class="item_name">C&amp;J Wash Bag</h4>
	    	<span class="item_price">£30.00</span>
	   <select id="colour" class="colour">
    <option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png">Black</option>
    <option value="Red" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagRed.png">Red</option>
</select>
	    	<select class="item_quantity">
				<option value="0">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>	
			</select>
	    	<input type="hidden" class="item_shipping" value="0" />
	    	<input type="button" class="item_add" value="Add To Basket" />
		</li>

		<li class="simpleCart_shelfItem">
	    	<img id="imageToSwap1" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png" />
	   		<h4 class="item_name">C&amp;J Wool Lined Gloves</h4>
	    	<span class="item_price">£28.00</span>
	    	 <select id="colour1" class="colour">
    <option value="Brown" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png">Brown</option>
    <option value="Tan" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesTan.png">Tan</option>
    <option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBlack.png">Black</option>
    <option value="Grey" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesGrey.png">Grey</option>
</select>
	    	<select required class="item_quantity">
				<option value="0">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>	
			</select>
	    	<input type="hidden" class="item_shipping" value="0" />
	    	<input type="button" class="item_add" value="Add To Basket" />
		</li></ul>

希望它有所帮助。

答案 1 :(得分：0)

在我看来，你有“imageToSwap”重复。因此，该函数无法找到要刷新的正确对象。

答案 2 :(得分：0)

作为W3C规则的一部分， html cannot contain duplicate ids 。因此，我建议您更改ids并通过选择class执行颜色更改，如下所示：

更改 -

  • 在您的颜色colorChange元素中添加了类select并更改了它 idŠ
  • 将event change更改为class，然后将$(this)的实际目标图片投放到parent li并获取img类image_thumb }}

＆＃13;
＆＃13; 
$(function() {
  $(".colorChange").on('change', function() {
    $(this).closest('li').find('.item_thumb').attr("src", $(this).find(":selected").attr("data-src"));
  });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="shelf">
  <li class="simpleCart_shelfItem">
    <img id="imageToSwap" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png" />
    <h4 class="item_name">C&amp;J Wash Bag</h4>
    <span class="item_price">£30.00</span>
    <select id="colour" class="colorChange">
      <option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png">Black</option>
      <option value="Red" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagRed.png">Red</option>
    </select>
    <select class="item_quantity">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
    <input type="hidden" class="item_shipping" value="0" />
    <input type="button" class="item_add" value="Add To Basket" />
  </li>

  <li class="simpleCart_shelfItem">
    <img id="imageToSwap1" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png" />
    <h4 class="item_name">C&amp;J Wool Lined Gloves</h4>
    <span class="item_price">£28.00</span>
    <select id="colour1" class="colorChange">
      <option value="Brown" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png">Brown</option>
      <option value="Tan" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesTan.png">Tan</option>
      <option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBlack.png">Black</option>
      <option value="Grey" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesGrey.png">Grey</option>
    </select>
    <select required class="item_quantity">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
    <input type="hidden" class="item_shipping" value="0" />
    <input type="button" class="item_add" value="Add To Basket" />
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题