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

Posted 2023-05-09

【中文标题】使用选择选项下拉更改图像，但对于多个事件？

【英文标题】：Changing image using Select option drop down, but for multiple events?

【发布时间】：2016-04-11 09:18:57

【问题描述】：

使用 JQuery 在选择更改时更改图像，代码在一个表单上有效，但是如果我尝试将同一事物应用于另一个表单，则 JQuery 将不起作用。需要实现这一基础，我可以使用相同的代码来更改单个选择。

随意运行代码，看看我的意思，第一项有效，将选择选项更改为红色，图像更改，尝试与下一个相同，虽然它以相同的方式编写，但没有运气。

如果您需要其他任何信息，请告诉我，提前谢谢。

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

【问题讨论】：

你的另一个form是否存在于同一页面中？

确保您的页面中没有重复的 ID...

抱歉造成混淆，不是指多个表格，我是指多个选择框，我已经适当地更新了帖子。

将 html 中的 id="colour" 更改为 class="colour"，以便您在脚本中选择元素并将 $("#colour") 更改为 $(".colour")。

【参考方案1】：

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

您可以使用类而不是 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>

希望对你有帮助。

【讨论】：

有没有办法用同一个 ID 做这个？我不得不在一个页面上放置多达 20 个相同类型的选择框，它们都需要相同的功能，并且希望避免对 JQuery 进行编号，不过，如果一切都失败了，感谢您的回答！

只使用class而不是id。

您不能对多个使用相同的 id。然后使用类。

这行得通！谢谢！但是，不会更改正确选择器上方的单个图片，而是始终更改第一个选项图像，如果这有意义吗？ （使用 id="imageToSwap"）

【参考方案2】：

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

【参考方案3】：

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

变化 -

将colorChange 类添加到您的颜色select 元素并更改其 ids 将event change 更改为在class 上触发并使用$(this) 获取实际目标图像到达其parent li 并使用类image_thumb 获取img

$(function() 
  $(".colorChange").on('change', function() 
    $(this).closest('li').find('.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="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>